react-hyukie-bottom-sheet

A simple Bottom Sheet that can be used in React

Installation

npm

npm install react-hyukie-bottom-sheet --save

yarn

yarn add react-hyukie-bottom-sheet

Example

import { useState } from "react";
import { BottomSheet } from "react-hyukie-bottom-sheet";

function App() {
  const [isShow, setIsShow] = useState(false);

  const handleBottomSheet = () => {
    setIsShow((prev) => !prev);
  };

  return (
    <>
      <button onClick={handleBottomSheet}>
        <h1>Bottom-Sheet Show</h1>
      </button>
      <BottomSheet
        handleBottomSheet={handleBottomSheet}
        isShow={isShow}
        contents={<p>Hello world</p>}
      />
    </>
  );
}

export default App;

props

| Prop name | essential | type | Description | Example | | ----------------- | :-------: | :-------------: | -------------------------------------------------------------------------------------------------- | -------------------------------------- | | isShow | X | boolean | A value that determines whether the bottom sheet comes out or not. | true | | handleBottomSheet | X | function | A function that manages isShow, a value that determines whether the bottom sheet comes out or not. | setIsShow((prev) => !prev) | | contents | X | React.ReactNode | Content to be placed inside the bottom sheet | <p>Hello World</p> | | height | X | number | Height that the bottom sheet will occupy on the screen (vertical size) | 350 | | backGroundColor | X | string | Existing screen color when Bottom Sheet is raised | gray rgba(0, 0, 0, 0.2) #fff ... | | shadow | X | string | Bottom Sheet's Top Shadow Style | 0px 0px 5px 0px rgba(0, 0, 0, 0.45) | | duration | X | number | The speed at which the bottom sheet rises | 500 | | borderRadius | X | number | Left and right bends at the top of the bottom sheet rises | 16 |