项目作者: C0pyR1ght

项目描述 :
Easy to use, Mobile First Modal library For React
高级语言: JavaScript
项目地址: git://github.com/C0pyR1ght/react-modality.git
创建时间: 2021-05-15T23:53:03Z
项目社区:https://github.com/C0pyR1ght/react-modality

开源协议:MIT License

下载


Fork of React Dynamic Sheet

To install:
npm i react-dynamic-sheet or yarn add react-dynamic-sheet

Styleguide:
https://rsoury.github.io/react-dynamic-sheet/

React Dynamic Sheet is react component to provide mobile users an app like, swipeable Bottom Sheet and desktop users a Modal Dialog.

What does it look like?

Demonstration of Sheet on Mobile

How to use it?

  1. import DynamicSheet from 'react-dynamic-sheet';
  2. import { EntryButton, Box } from './your-components/'
  3. const App = () => {
  4. const [checkout, setCheckout] = useState(false);
  5. const abort = () => setCheckout(false);
  6. const startCheckout = () => setCheckout(true);
  7. const confirmClose = true;
  8. return (
  9. <>
  10. <DynamicSheet
  11. isOpen={checkout}
  12. onClose={abort}
  13. confirmClose={confirmClose}
  14. >
  15. <Box sx={{ padding: "200px 40px" }}>Hello Checkout</Box>
  16. </DynamicSheet>
  17. <EntryButton onClick={startCheckout} ></EntryButton>
  18. </>
  19. );
  20. }