This is a React component library built on top of Material-UI (MUI), designed to provide customizable and reusable components for your applications. The library is currently in development, with the first component being ResizableDrawer
.
You can install the library:
npm install arisen-front-components
Import the components you need and use them in your project:
import { useState } from 'react';
import { Button } from '@mui/material';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import { ResizableDrawer } from 'arisen-front-components';
import classes from './TestDrawer.module.css';
const App = () => {
const [isOpen, setIsOpen] = useState(false);
const handleOpen = () => setIsOpen(() => true);
const handleClose = () => setIsOpen(() => false);
return (
<div>
<Button variant="outlined" onClick={handleOpen}>
open
</Button>
<ResizableDrawer
open={isOpen}
onOpen={handleOpen}
onClose={handleClose}
anchor="left"
header={
<div className={classes.header}>
<Button variant="contained" size="small">
sign in
</Button>
<Button variant="contained" size="small">
sign up
</Button>
</div>
}
footer={<div>v0.0.1</div>}
startPosition={300}
minSize={200}
maxSize={500}
draggerClassName={classes.dragger}
draggerIcon={<MoreVertIcon />}
>
<div>
<p>children</p>
<p>node</p>
</div>
</ResizableDrawer>
</div>
);
};
export default App;
Ensure you have MUI installed as a peer dependency:
npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
The ResizableDrawer
is a flexible and customizable drawer component with resizing functionality. It can be used to create side panels, navigation menus, or other layout elements that require adjustable widths.
Name | Type | Default | Description |
---|---|---|---|
open |
boolean |
false |
Controls whether the drawer is open or closed. |
onClose |
() => void |
undefined |
Callback fired when the drawer is requested to be closed. |
onOpen |
() => void |
undefined |
Callback fired when the drawer is requested to be opened. |
className |
string |
undefined |
Custom CSS class applied to the drawer. |
header |
ReactNode |
undefined |
Optional header content rendered at the top of the drawer. |
children |
ReactNode |
undefined |
Content displayed in the main body of the drawer. |
footer |
ReactNode |
undefined |
Optional footer content rendered at the bottom of the drawer. |
wistartPositiondth |
number |
60% of viewport width |
The initial width of the drawer. |
minSize |
number |
350 |
The minimum width of the drawer in pixels. |
maxSize |
number |
Viewport width minus 100px |
The maximum width of the drawer in pixels. |
draggerIcon |
ReactNode |
<DragIndicatorIcon /> |
Icon displayed for the dragger. |
draggerClassName |
string |
undefined |
Custom CSS class for the dragger element. |
anchor |
top right bottom left
|
right |
Anchor position of the drawer. |
<ResizableDrawer
open={isOpen}
onOpen={handleOpen}
onClose={handleClose}
anchor="right"
header={
<div className={classes.header}>
<Button variant="contained" size="small">
sign in
</Button>
<Button variant="contained" size="small">
sign up
</Button>
</div>
}
footer={<div>v0.0.1</div>}
startPosition={300}
minSize={200}
maxSize={500}
draggerClassName={classes.dragger}
draggerIcon={<MoreVertIcon />}
>
<div>
<p>children</p>
<p>node</p>
</div>
</ResizableDrawer>
This library includes a Storybook instance for visualizing and testing components.
To start the Storybook development server, run:
npm run storybook
To build a static version of the Storybook for deployment:
npm run build-storybook
The static files will be output to the storybook-static
directory.
You can view a live version of the Storybook here.
To contribute or extend the library, follow these steps:
-
Clone the repository:
git clone https://github.com/your-username/your-repository-name.git
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Run Storybook for component development:
npm run storybook
This project is licensed under the MIT License.