Merge pull request #64 from yjose/docs/update_props

update docs && add repositionOnResize prop to API page
yjose · Dec 13, 2018 · f06ed79 · f06ed79
2 parents 6e60c66 + c937598
commit f06ed79
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 13 deletions.
diff --git a/docs/src/mdPages/3.componentApi.md b/docs/src/mdPages/3.componentApi.md
@@ -27,6 +27,7 @@ The reactjs-popup API is inspired by semantic popup docs
 | lockScroll           | false             | {bool}         | Disable body scroll when modal is open ( work only with modal)                                                                                                                                                                                                        |
 | closeOnDocumentClick | true              | {bool}         | close popup when the overlay clicked                                                                                                                                                                                                                                  |
 | closeOnEscape        | true              | {bool}         | close popup when Escape clicked                                                                                                                                                                                                                                       |
+| repositionOnResize        | true              | {bool}         | recalculate position when window is resized                                                                                                                                                                                                                                       |
 | mouseEnterDelay      | 100               | {number}       | Milliseconds to wait before opening on mouse over                                                                                                                                                                                                                     |
 | mouseLeaveDelay      | 100               | {number}       | Milliseconds to wait before closing on mouse leave                                                                                                                                                                                                                    |
 | onOpen               |                   | {func}         | function called on open event                                                                                                                                                                                                                                         |

diff --git a/docs/src/mdPages/4.controlledPopup.md b/docs/src/mdPages/4.controlledPopup.md
@@ -1,13 +1,13 @@
 ---
 position: 4
 path: Controlled Popup
-title: React Popup Component - Modals,Tooltips and Menus —  All in one
+title: React Popup Component - Controlled React Popup
 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 ...
 ---
 
 import ControlledPopup from '../../../src/examples/ControlledPopup.js'
 
-### Controlled react Popup
+### Controlled React Popup
 
 As we already mentioned in the Component API section, you can create a controlled Popup component by using the `open` prop like the following :
 

diff --git a/docs/src/mdPages/5.tooltipExamples.md b/docs/src/mdPages/5.tooltipExamples.md
@@ -1,7 +1,7 @@
 ---
 position: 5
 path: Use Case - Tooltip
-title: React Popup |  Use case - Tooltip example
+title: React Popup |  Use case - React Tooltip example
 description: A simple tooltip example with reactjs-popup,Nested Tooltip, all available position
 ---
 
@@ -10,13 +10,12 @@ import ToolTipPositions from '../../../src/examples/ToolTipPositions.js'
 import NestedToolTip from '../../../src/examples/NestedToolTip.js'
 import BoundedTooltip from '../../../src/examples/BoundedTooltip.js'
 
-## Use Case - Tooltip
+## Use Case - React Tooltip
 
 Reactjs Popup is built to be a tooltip by default
 
 
 ```jsx
-/* react-live */
 
 const Tooltip = () => (
   <Popup
@@ -29,10 +28,9 @@ const Tooltip = () => (
     <span> Popup content </span>
   </Popup>
 )
-render(<Tooltip />)
 ```
 
-## Nested Tooltip
+## Nested React Tooltip
 
 reactjs-popup support nested Tooltip
 
@@ -73,7 +71,7 @@ const NestedToolTip = () => (
 )
 ```
 
-## Tooltip position
+## React Tooltip position
 
 <ToolTipPositions/>
 
@@ -177,7 +175,7 @@ const ToolTipPositions = () => (
 }
 ```
 
-## Bounded Tooltip
+## Bounded React Tooltip
 
 reactjs-popup supports tooltip bounded inside an element(defaults to window)
 
@@ -201,3 +199,25 @@ const BoundedTooltip = () => (
   </div>
 )
 ```
+
+## Play with  React Tooltip
+
+
+```jsx
+/* react-live */
+
+const Tooltip = () => (
+  <Popup
+    trigger={open => (
+      <button className="button">Trigger - {open ? 'Opened' : 'Closed'}</button>
+    )}
+    position="right center"
+    closeOnDocumentClick
+  >
+    <span> Popup content </span>
+  </Popup>
+)
+render(<Tooltip />)
+```
+
+
diff --git a/docs/src/mdPages/6.menuExamples.md b/docs/src/mdPages/6.menuExamples.md
@@ -1,13 +1,13 @@
 ---
 position: 6
 path: Use Case - Menu
-title: React Popup |  Use case - Menu example
+title: React Popup |  Use case - React Menu example
 description: A simple tooltip example with reactjs-popup
 ---
 
 import SimpleMenu from '../../../src/examples/SimpleMenu.js'
 
-## Use Case - Menu
+## Use Case - React Menu
 
 you can create a nested Menu with reactjs-popup easily as the following.
 

diff --git a/docs/src/mdPages/7.modalExamples.md b/docs/src/mdPages/7.modalExamples.md
@@ -1,15 +1,15 @@
 ---
 position: 7
 path: Use Case - Modal
-title: React Popup |  Use case - Modal example
+title: React Popup |  Use case - React Modal example
 description: A simple tooltip example with reactjs-popup
 
 ---
 
 import SimpleModal from '../../../src/examples/SimpleModal.js'
 import CustomModal from '../../../src/examples/CustomModal.js'
 
-## Use Case - Modal
+## Use Case - React Modal
 
 To create a simple Modal with reactjs-popup you need just to add the 'modal' attribute to your popup component.