@clikvn/react-bottom-sheet v1.0.2

To develop

Available Scripts

In the project directory, you run: Start storybook

yarn storybook

Try to build js

yarn rollup

Public to npmjs

yarn deploy

Runs the app in the development mode.\ Open http://localhost:6006 to view it in the browser.

To use

Installation

  npm i @clikvn/react-bottom-sheet

or

  yarn add @clikvn/react-bottom-sheet

Usage/Examples

import { BottomSheet } from "@clikvn/react-bottom-sheet";
import "@clikvn/react-bottom-sheet/dist/cjs/style.css";

function App() {
  const bottomSheetRef = useRef<BottomSheetRefTypes>();

  useEffect(() => {
    bottomSheetRef?.current?.triggerOpen(true)
  }, []);

  return 
   <div style={{width:"80vw", height: "80vh"}}>
      <button onClick={() => {
        bottomSheetRef?.current?.triggerOpen(true)
        bottomSheetRef?.current?.expand()
        }}
        >open
      </button>
      <BottomSheet  
        ref={bottomSheetRef} 
        header={
          <div>header</div>
        } 
        {...args}
        swipeLevels={DEFAULT_SWIPE_LEVELS}
        onChangeSwipeLevel={handleChangeSwipeLevel}
        >
          content
        </BottomSheet>
    </div>
}

Features

• BottomSheet gitlab