0.1.92 • Published 10 months ago
react-framer-bottom-sheet v0.1.92
react-framer-bottom-sheet
Installation
npm install react-framer-bottom-sheet
or
yarn add react-framer-bottom-sheet
Usage
import FramerBottomSheet from 'react-framer-bottom-sheet';
import { FramerBottomSheetRef } from 'react-framer-bottom-sheet/dist/sheetType';
function App() {
const sheetRef = useRef < FramerBottomSheetRef > null;
const buttonHandler = () => {
sheetRef.current?.snapTo('bottom');
};
return (
<div className="App">
<button onClick={buttonHandler}>to bottom</button>
<FramerBottomSheet
initialPosition="top"
ref={sheetRef}
style={{ backgroundColor: '#FAFAFA' }}
snapPoint={{ top: { height: 400 }, bottom: { height: 100 } }}
bottomScrollLock
headerElement={
<div style={{ height: 50, backgroundColor: 'red' }}>header</div>
}
footerElement={
<div style={{ height: 50, backgroundColor: 'green' }}>footer</div>
}
>
<div style={{ height: 500, backgroundColor: 'blue' }}>Content</div>
</FramerBottomSheet>
</div>
);
}
export default App;
0.1.92
10 months ago
0.1.91
10 months ago
0.1.9
10 months ago
0.1.81
10 months ago
0.1.8
10 months ago
0.1.72
10 months ago
0.1.71
10 months ago
0.1.7
10 months ago
0.1.62
10 months ago
0.1.61
10 months ago
0.1.6
10 months ago
0.1.53
10 months ago
0.1.52
10 months ago
0.1.51
10 months ago
0.1.5
10 months ago
0.1.4
10 months ago
0.1.3
10 months ago
0.1.2
10 months ago
0.1.1
10 months ago
0.1.0
10 months ago