1.2.16 • Published 1 year ago
react-sidebar-animation v1.2.16
React animated Sidebar
Installation
$ npm i react-sidebar-animation
Description
An animated sidebar shell for React.
Two behavior:
- Open on the side of your content either left or right.
- Open in fullWidth
The combination is useful if your are looking for a responsive sidebar that has those 2 behaviors depending on your screen size.
Demo
See the demo
Example:
const Example = () => {
const { toggleSidebar, state, inTransition, open } = useSidebar({
initiallyOpen: true,
fullWidth: false,
sidebarWidth: SIDEBAR_WIDTH,
});
return (
<div
style={{
position: 'relative',
display: 'flex',
height: '100vh',
width: '100vw',
}}
>
<div
style={{
flexGrow: 1,
padding: '16px',
}}
>
<button onClick={toggleSidebar}>Toggle sidebar</button>
</div>
<SidebarContainer
{...state}
zIndex={10}
style={{
backgroundColor: '#1976D2',
color: 'white',
padding: '8px',
boxShadow: '2px 0px 2px 1px #1575C0',
marginRight: '2px',
}}
>
<div>Sidebar</div>
</SidebarContainer>
</div>
);
};
See the package source for more details.
1.2.8
1 year ago
1.2.7
1 year ago
1.2.6
1 year ago
1.2.5
1 year ago
1.2.4
1 year ago
1.2.3
1 year ago
1.2.2
1 year ago
1.2.1
1 year ago
1.2.9
1 year ago
1.2.12
1 year ago
1.2.13
1 year ago
1.2.10
1 year ago
1.2.11
1 year ago
1.2.16
1 year ago
1.2.14
1 year ago
1.2.15
1 year ago
1.2.0
1 year ago
1.1.8
1 year ago
1.1.7
1 year ago
1.1.6
1 year ago
1.1.5
1 year ago
1.1.4
1 year ago
1.1.3
1 year ago
1.1.2
1 year ago
1.1.1
1 year ago
1.1.0
1 year ago
1.0.0
1 year ago
0.1.7
1 year ago
0.1.6
1 year ago
0.1.5
1 year ago
0.1.4
1 year ago
0.1.3
1 year ago
0.1.2
1 year ago
0.1.1
1 year ago
0.1.0
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago