From 704bb90be08d6f352c5bb34810459649e625dfa0 Mon Sep 17 00:00:00 2001 From: Ryan Kim Date: Thu, 11 Apr 2019 23:52:39 -0500 Subject: [PATCH] Update README.md --- README.md | 172 ++++++++++++++++++++++++------------------------------ 1 file changed, 77 insertions(+), 95 deletions(-) diff --git a/README.md b/README.md index 94701b3..9e0eb16 100644 --- a/README.md +++ b/README.md @@ -3,111 +3,93 @@ ### Usage ```javascript +import React from 'react'; import { Popup } from 'react-popup-provider'; - - ( - - )} - > - {({ - close, - }) => ( -
- My popup - -
- )} - - + + ( + + )} +> + {() =>
My popup
} + ``` -##### More Control ```javascript -import { Consumer, PopupProvider, PopupContainer } from 'react-popup-provider'; - - - {({ contextRef, open }) => ( -
-
- -
- )} - - - {({ - contextRef, - close, - isOpen, - scrollableParents, - }) => ( - - { - isOpen - && - {props.children} - - } - - )} - - +import React from 'react'; +import { Modal } from 'react-popup-provider'; + + ( + + )} +> + {({ close }) => ( +
+ My Modal + +
+ )} + ``` +##### With Animation (react-spring) +```javascript +// Modal works the same way +import React, { cloneElement } from 'react'; +import { Popup } from 'react-popup-provider'; +import { Transition } from 'react-spring'; -### APIs +const Appear = ({ children, isOpen }) => ( + + {isOpen => (isOpen && (style => + cloneElement(children, { + as: animated.div, + style + }) + ))} + +); -##### PopupProvider -Context Provider. -##### Consumer -Context Consumer. + ( + + )} +> + {() =>
My popup
} + +``` -##### Modal - * **Modal** - Simple compound component that hides the ModalContainer and context APIs. This is an example of what you can do with the other components. - * `as`: `React$ElementType` - defaults to `div`. Container's root element. - * `children`: `({ close, isOpen }) => React$Node` - * `className`: `string` - * `close`: `() => void` - Close function callback. - * `context`: `({ close, contextRef, isOpen, open, scrollableParents }) => React$Node` - * `root`: `HTMLElement` - Portal element. Defaults to `` - * `style`: `{ [string]: any }` - * **ModalContainer** - container that renders to portal - * `as`: `React$ElementType` - defaults to `div`. Container's root element. - * `children`: `({ close, isOpen }) => React$Node` - * `className`: `string` - * `close`: `() => void` - Close function callback. - * `root`: `HTMLElement` - Portal element. Defaults to `` - * `style`: `{ [string]: any }` +### APIs + +##### Modal + * `animation`: `React$ElementType` - defaults to `Tada` effect. Which is just show when `isOpen` is `true`. + * `children`: `({ close, left, top }) => React$Node` + * `className`: `string` + * `close`: `() => void` - Close function callback. + * `context`: `({ close, contextRef, isOpen, open, scrollableParents }) => React$Node` ##### Popup - - * **Popup** - Simple compound component that hides the PopupContainer and context APIs. This is an example of what you can do with the other components. - * `anchor`: `top | bottom | left | right` - * `as`: `React$ElementType` - Container's root element. Defaults to `div`. - * `children`: `({ close, contextClientRect, left, top, }) => React$Node` - * `className`: `string` - * `context`: `({ close, contextRef, isOpen, open, scrollableParents }) => React$Node` - * `offset`: `number` - Offset in pixels from the anchored position - * `shouldCenterToContext`: `boolean` - Shows the popup center to the context, if true. Defaults to false. - * `style`: `{ [string]: any }` - * **PopupContainer** - container that renders to portal and has logic to reposition - * `anchor`: `top | bottom | left | right` - * `as`: `React$ElementType` - Defaults to `div`. Container's root element. - * `children`: `({ close, contextClientRect, left, top, }) => React$Node` - * `className`: `string` - * `contextRef`: `Element` - Reference to the popup context from the provider. - * `closePopup`: `ClosePopup` - Close popup callback function. - * `offset`: `number` - Offset in pixels from the anchored position - * `root`: `HTMLElement` - Portal element, defaults to `` - * `scrollableParents`: `Array` - List of scrollable parents from the provider. - * `shouldCenterToContext`: `boolean` - Shows the popup center to the context, if true. Defaults to false. - * `style`: `{ [string]: any }` + * `anchor`: `top | bottom | left | right` + * `animation`: `React$ElementType` - defaults to `Tada` effect. Which is just show when `isOpen` is `true`. + * `children`: `({ close, left, top }) => React$Node` + * `className`: `string` + * `close`: `() => void` - Close function callback. + * `context`: `({ close, contextRef, isOpen, open, scrollableParents }) => React$Node` + * `offset`: `number` - Offset in pixels from the anchored position + * `shouldCenterToContext`: `boolean` - Shows the popup center to the context, if true. Defaults to false.