react-hyukie-bottom-sheet

A simple Bottom Sheet that can be used in React

Installation

$3

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

$3

`
yarn add react-hyukie-bottom-sheet
`

Example

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

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

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

return (
<>

Bottom-Sheet Show

handleBottomSheet={handleBottomSheet}
isShow={isShow}
contents={

Hello world

}
/>

);
}

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 |

Hello World

|
| 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` |