@happyfresh/bottom-sheet
v1.14.5
Published
HappyFresh UI components that is a bottom-sheet
Downloads
115
Keywords
Readme
BottomSheet
A React component that is a BottomSheet. New version will be featured with header in bottomsheet
Installation
yarn add @happyfresh/bottom-sheet
Usage
import React, { useState } from 'react';
import { BottomSheet } from '@happyfresh/bottom-sheet';
import { css } from 'emotion';
export default {
title: 'BottomSheet',
};
export const BottomSheetBasic = () => {
const [open, setOpen] = useState(false);
const handleRequestClose = () => {
setOpen(false);
};
return (
<div>
<button onClick={() => setOpen(true)}>Open!</button>
<BottomSheet open={open} onRequestClose={handleRequestClose} withCloseButton styles={{
close: {
top: 0
}
}}>
<div>your child components here</div>
</BottomSheet>
</div>
);
};