react-dynamic-sheet

0.2.0 • Public • Published

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?

import DynamicSheet from 'react-dynamic-sheet';
import { EntryButton, Box } from './your-components/'
 
const App = () => {
  const [checkout, setCheckout] = useState(false);
  const abort = () => setCheckout(false);
  const startCheckout = () => setCheckout(true);
  const confirmClose = true;
 
  return (
    <>
      <DynamicSheet
        isOpen={checkout}
        onClose={abort}
        confirmClose={confirmClose}
      >
        <Box sx={{ padding: "200px 40px" }}>Hello Checkout</Box>
      </DynamicSheet>
      <EntryButton onClick={startCheckout} />
    </>
  );
}

Package Sidebar

Install

npm i react-dynamic-sheet

Weekly Downloads

3

Version

0.2.0

License

MIT

Unpacked Size

319 kB

Total Files

9

Last publish

Collaborators

  • rsoury