Skip to content

Commit c937598

Browse files
committed
update docs && add repositionOnResize prop to API page
1 parent 6e60c66 commit c937598

File tree

5 files changed

+34
-13
lines changed

5 files changed

+34
-13
lines changed

docs/src/mdPages/3.componentApi.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ The reactjs-popup API is inspired by semantic popup docs
2727
| lockScroll | false | {bool} | Disable body scroll when modal is open ( work only with modal) |
2828
| closeOnDocumentClick | true | {bool} | close popup when the overlay clicked |
2929
| closeOnEscape | true | {bool} | close popup when Escape clicked |
30+
| repositionOnResize | true | {bool} | recalculate position when window is resized |
3031
| mouseEnterDelay | 100 | {number} | Milliseconds to wait before opening on mouse over |
3132
| mouseLeaveDelay | 100 | {number} | Milliseconds to wait before closing on mouse leave |
3233
| onOpen | | {func} | function called on open event |

docs/src/mdPages/4.controlledPopup.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
22
position: 4
33
path: Controlled Popup
4-
title: React Popup Component - Modals,Tooltips and Menus —  All in one
4+
title: React Popup Component - Controlled React Popup
55
description: A Simple React popup component.Use it as a tooltip,modal,sub-menu and match more, In this Tuto, we introduce how you can create a controlled popup, so you can control you popup state completely ...
66
---
77

88
import ControlledPopup from '../../../src/examples/ControlledPopup.js'
99

10-
### Controlled react Popup
10+
### Controlled React Popup
1111

1212
As we already mentioned in the Component API section, you can create a controlled Popup component by using the `open` prop like the following :
1313

docs/src/mdPages/5.tooltipExamples.md

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
position: 5
33
path: Use Case - Tooltip
4-
title: React Popup | Use case - Tooltip example
4+
title: React Popup | Use case - React Tooltip example
55
description: A simple tooltip example with reactjs-popup,Nested Tooltip, all available position
66
---
77

@@ -10,13 +10,12 @@ import ToolTipPositions from '../../../src/examples/ToolTipPositions.js'
1010
import NestedToolTip from '../../../src/examples/NestedToolTip.js'
1111
import BoundedTooltip from '../../../src/examples/BoundedTooltip.js'
1212

13-
## Use Case - Tooltip
13+
## Use Case - React Tooltip
1414

1515
Reactjs Popup is built to be a tooltip by default
1616

1717

1818
```jsx
19-
/* react-live */
2019

2120
const Tooltip = () => (
2221
<Popup
@@ -29,10 +28,9 @@ const Tooltip = () => (
2928
<span> Popup content </span>
3029
</Popup>
3130
)
32-
render(<Tooltip />)
3331
```
3432

35-
## Nested Tooltip
33+
## Nested React Tooltip
3634

3735
reactjs-popup support nested Tooltip
3836

@@ -73,7 +71,7 @@ const NestedToolTip = () => (
7371
)
7472
```
7573

76-
## Tooltip position
74+
## React Tooltip position
7775

7876
<ToolTipPositions/>
7977

@@ -177,7 +175,7 @@ const ToolTipPositions = () => (
177175
}
178176
```
179177

180-
## Bounded Tooltip
178+
## Bounded React Tooltip
181179

182180
reactjs-popup supports tooltip bounded inside an element(defaults to window)
183181

@@ -201,3 +199,25 @@ const BoundedTooltip = () => (
201199
</div>
202200
)
203201
```
202+
203+
## Play with React Tooltip
204+
205+
206+
```jsx
207+
/* react-live */
208+
209+
const Tooltip = () => (
210+
<Popup
211+
trigger={open => (
212+
<button className="button">Trigger - {open ? 'Opened' : 'Closed'}</button>
213+
)}
214+
position="right center"
215+
closeOnDocumentClick
216+
>
217+
<span> Popup content </span>
218+
</Popup>
219+
)
220+
render(<Tooltip />)
221+
```
222+
223+

docs/src/mdPages/6.menuExamples.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
22
position: 6
33
path: Use Case - Menu
4-
title: React Popup | Use case - Menu example
4+
title: React Popup | Use case - React Menu example
55
description: A simple tooltip example with reactjs-popup
66
---
77

88
import SimpleMenu from '../../../src/examples/SimpleMenu.js'
99

10-
## Use Case - Menu
10+
## Use Case - React Menu
1111

1212
you can create a nested Menu with reactjs-popup easily as the following.
1313

docs/src/mdPages/7.modalExamples.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
position: 7
33
path: Use Case - Modal
4-
title: React Popup | Use case - Modal example
4+
title: React Popup | Use case - React Modal example
55
description: A simple tooltip example with reactjs-popup
66

77
---
88

99
import SimpleModal from '../../../src/examples/SimpleModal.js'
1010
import CustomModal from '../../../src/examples/CustomModal.js'
1111

12-
## Use Case - Modal
12+
## Use Case - React Modal
1313

1414
To create a simple Modal with reactjs-popup you need just to add the 'modal' attribute to your popup component.
1515

0 commit comments

Comments
 (0)