Skip to content

Commit c7866db

Browse files
alexkatzalexkatz
committed
2 parents f49c3f3 + 48451ad commit c7866db

File tree

1 file changed

+54
-60
lines changed

1 file changed

+54
-60
lines changed

‎README.md

Lines changed: 54 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -34,20 +34,16 @@ import Popover from 'react-tiny-popover'
3434
...
3535

3636
<Popover
37-
isOpen={isPopoverOpen}
38-
position={'top'} // preferred position
39-
content={(
40-
<div>
41-
Hi! I'm popover content.
42-
</div>
43-
)}
37+
isOpen={isPopoverOpen}
38+
position={'top'} // preferred position
39+
content={<div>Hi! I'm popover content.</div>}
4440
>
45-
{ref => (
41+
{ref => (
4642
<div ref={ref} onClick={() => setIsPopoverOpen(!isPopoverOpen)}>
47-
Click me!
43+
Click me!
4844
</div>
49-
)}
50-
</Popover>
45+
)}
46+
</Popover>;
5147
```
5248
5349
```JSX
@@ -56,25 +52,23 @@ import Popover from 'react-tiny-popover'
5652
...
5753
5854
<Popover
59-
isOpen={isPopoverOpen}
60-
position={['top', 'right', 'left', 'bottom']} // if you'd like, supply an array of preferred positions ordered by priority
61-
padding={10} // adjust padding here!
62-
disableReposition // prevents automatic readjustment of content position that keeps your popover content within your window's bounds
63-
onClickOutside={() => setIsPopoverOpen(false)} // handle click events outside of the popover/target here!
64-
content={({ position, nudgedLeft, nudgedTop, targetRect, popoverRect }) => ( // you can also provide a render function that injects some useful stuff!
65-
<div>
66-
<div>Hi! I'm popover content. Here's my position: {position}.</div>
67-
<div>I'm {` ${nudgedLeft} `} pixels beyond the window horizontally!</div>
68-
<div>I'm {` ${nudgedTop} `} pixels beyond the window vertically!</div>
69-
</div>
70-
)}
71-
>
72-
{ref => (
73-
<div onClick={() => setIsPopoverOpen(!isPopoverOpen)}>
74-
Click me!
55+
isOpen={isPopoverOpen}
56+
position={['top', 'right', 'left', 'bottom']} // if you'd like, supply an array of preferred positions ordered by priority
57+
padding={10} // adjust padding here!
58+
disableReposition // prevents automatic readjustment of content position that keeps your popover content within your window's bounds
59+
onClickOutside={() => setIsPopoverOpen(false)} // handle click events outside of the popover/target here!
60+
content={({ position, nudgedLeft, nudgedTop, targetRect, popoverRect }) => ( // you can also provide a render function that injects some useful stuff!
61+
<div>
62+
<div>Hi! I'm popover content. Here's my position: {position}.</div>
63+
<div>I'm {` ${nudgedLeft} `} pixels beyond the window horizontally!</div>
64+
<div>I'm {` ${nudgedTop} `} pixels beyond the window vertically!</div>
7565
</div>
76-
)}
77-
</Popover>
66+
)}
67+
>
68+
{ref => (
69+
<div onClick={() => setIsPopoverOpen(!isPopoverOpen)}>Click me!</div>
70+
)}
71+
</Popover>;
7872
```
7973
8074
```JSX
@@ -83,37 +77,37 @@ import Popover, { ArrowContainer } from 'react-tiny-popover'
8377
...
8478

8579
<Popover
86-
isOpen={isPopoverOpen}
87-
position={['top', 'right', 'left', 'bottom']}
88-
padding={10}
89-
onClickOutside={() => setIsPopoverOpen(false)}
90-
content={({ position, targetRect, popoverRect }) => (
91-
<ArrowContainer // if you'd like an arrow, you can import the ArrowContainer!
92-
position={position}
93-
targetRect={targetRect}
94-
popoverRect={popoverRect}
95-
arrowColor={'blue'}
96-
arrowSize={10}
97-
arrowStyle={{ opacity: 0.7 }}
98-
>
99-
<div
100-
style={{ backgroundColor: 'blue', opacity: 0.7 }}
101-
onClick={() => setIsPopoverOpen(!isPopoverOpen)}
102-
>
103-
Hi! I'm popover content. Here's my position: {position}.
104-
</div>
105-
</ArrowContainer>
106-
)}
80+
isOpen={isPopoverOpen}
81+
position={['top', 'right', 'left', 'bottom']}
82+
padding={10}
83+
onClickOutside={() => setIsPopoverOpen(false)}
84+
content={({ position, targetRect, popoverRect }) => (
85+
<ArrowContainer // if you'd like an arrow, you can import the ArrowContainer!
86+
position={position}
87+
targetRect={targetRect}
88+
popoverRect={popoverRect}
89+
arrowColor={'blue'}
90+
arrowSize={10}
91+
arrowStyle={{ opacity: 0.7 }}
92+
>
93+
<div
94+
style={{ backgroundColor: 'blue', opacity: 0.7 }}
95+
onClick={() => setIsPopoverOpen(!isPopoverOpen)}
96+
>
97+
Hi! I'm popover content. Here's my position: {position}.
98+
</div>
99+
</ArrowContainer>
100+
)}
107101
>
108-
{ref => (
102+
{ref => (
109103
<div ref={ref} onClick={() => setIsPopoverOpen(!isPopoverOpen)}>
110-
Click me!
104+
Click me!
111105
</div>
112-
)}
113-
</Popover>
106+
)}
107+
</Popover>;
114108
```
115109
116-
If you'd like to use a custom React element as `Popover`'s target, you'll have to pass the `ref` `Popover` provides to an inner DOM element of your component. The best way to accomplish this is with [React's ref forwarding API](https://reactjs.org/docs/forwarding-refs.html). Here's a simple Typescript example, as well:
110+
If you'd like to use a custom React element as `Popover`'s target, you'll have to pass the `ref` that `Popover` provides to an inner DOM element of your component. The best way to accomplish this is with [React's ref forwarding API](https://reactjs.org/docs/forwarding-refs.html). Here's a simple example, using Typescript:
117111
118112
```JSX
119113
import React, { useState } from 'react';
@@ -124,18 +118,18 @@ interface CustomComponentProps extends React.ComponentPropsWithoutRef<'div'> {
124118
}
125119

126120
const CustomComponent = React.forwardRef<HTMLDivElement, CustomComponentProps>((props, ref) => (
127-
<div ref={ref} onClick={() => props.onClick()}>
121+
<div ref={ref} onClick={props.onClick}>
128122
{props.children}
129123
</div>
130124
));
131125

132126
const App: React.FC = () => {
133-
const [popoverIsOpen, setPopoverIsOpen] = useState(false);
127+
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
134128
return (
135129
<div>
136-
<Popover isOpen={popoverIsOpen} content={<div>hey from popover content</div>}>
130+
<Popover isOpen={isPopoverOpen} content={<div>hey from popover content</div>}>
137131
{ref => (
138-
<CustomComponent ref={ref} onClick={() => setPopoverIsOpen(!popoverIsOpen)}>
132+
<CustomComponent ref={ref} onClick={() => setIsPopoverOpen(!isPopoverOpen)}>
139133
hey from a custom target component
140134
</CustomComponent>
141135
)}
@@ -153,7 +147,7 @@ export default App;
153147
154148
| <b>Property<b> | Type | Required | Description |
155149
| ------------------- | -------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
156-
| children | `Function` | ✔️ | This function, of form `(ref: React.Ref) => JSX.Element`, will return the JSX.Element target that you'd like the popover content to track. In order to track that element, however, you must attach the provided `ref`. If you're using a custom React component, you'll have to employ React's ref forwarding. See the example above, or read more about that over at [React's ref forwarding docs](https://reactjs.org/docs/forwarding-refs.html).Sweet. |
150+
| children | `Function` | ✔️ | This function, of form `(ref: React.Ref) => JSX.Element`, will return the JSX.Element target that you'd like the popover content to track. In order to track that element, however, you must attach the provided `ref`. If you're using a custom React component, you'll have to employ React's ref forwarding. See the examples above, or read more about that over at [React's ref forwarding docs](https://reactjs.org/docs/forwarding-refs.html). Sweet. |
157151
| isOpen | `boolean` | ✔️ | When this boolean is set to true, the popover is visible and tracks the target. When the boolean is false, the popover content is neither visible nor present on the DOM. |
158152
| content | `JSX.Element` or `Function` | ✔️ | Here, you'll provide the content that will appear as the popover. Rather than a JSX element like a `<div>`, you may supply a function that returns a JSX.Element, which will look like this: `({ position, targetRect, popoverRect, align, nudgedLeft, nudgedTop }) => JSX.Element`. Here, `position` is of type `'top', 'bottom', 'left', 'right'`. `align` is of type `start`, `center`, or `end`. Both `targetRect` and `popoverRect` are `ClientRect` objects of format `{ height: number, width: number, top: number, left: number, right: number, bottom: number }`, and represent the popover content and target `div`'s coordinates within your browser's window. `nudgedLeft` and `nudgedTop` specify the X and Y offset the popover content is shifted by to keep it within the window's bounds during a boundary collision. You may want to use these values to adjust your content depending on its location in relation to the window and the target, especially if you have repositioning disabled. Sweet. |
159153
| padding | `number` | | This number determines the gap, in pixels, between your target content and your popover content. Defaults to 6. |

0 commit comments

Comments
 (0)