https://github.com/rsoury/react-dynamic-sheet

A react component for an animated mobile-first dynamic action sheet (modal/sheet)
https://github.com/rsoury/react-dynamic-sheet

bottom-sheet component javascript mobile-first mobile-responsive modal react

Last synced: about 1 year ago
JSON representation

A react component for an animated mobile-first dynamic action sheet (modal/sheet)

• Host: GitHub
• URL: https://github.com/rsoury/react-dynamic-sheet
• Owner: rsoury
• License: mit
• Created: 2020-04-15T06:45:08.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-04-16T07:09:22.000Z (about 6 years ago)
• Last Synced: 2024-04-25T12:43:43.069Z (about 2 years ago)
• Topics: bottom-sheet, component, javascript, mobile-first, mobile-responsive, modal, react
• Language: JavaScript
• Homepage: https://rsoury.github.io/react-dynamic-sheet/
• Size: 984 KB
• Stars: 20
• Watchers: 3
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 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](https://media.giphy.com/media/kcUcYwklHAE4BEdo43/giphy.gif)

#### How to use it? 

```jsx

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 (

    <>

      

        Hello Checkout

      

      

    >

  );

}

```