A React component that render an Hamburger button with sweet animations.
npm install react-zoburger-menuA React component that render an Hamburger button with sweet animations.
Based on Jonathan Suh css hamburgers.
Click here to test library.
npm i --save react-zoburger-menu
yarn add react-zoburger-menu
``tsx
import { Zoburger } from "react-zoburger-menu";
isActive={isActive}
onClick={handleZoburgerClick}
color="teal"
/>;
`
As this is based on Jonathan Suh css hamburgers, the animations' name are the same, here is the list:
- 3dx
- 3dx-r
- 3dy
- 3dy-r
- 3dxy
- 3dxy-r
- arrow
- arrow-r
- arrowalt
- arrowalt-r
- arrowturn
- arrowturn-r
- boring
- collapse
- collapse-r
- elastic
- elastic-r
- emphatic
- emphatic-r
- minus
- slider
- slider-r
- spin
- spin-r
- spring
- spring-r
- stand
- stand-r
- squeeze
- vortex
- vortex-r
| Props | Type | Required | Default | Description |
| ----------- | ---------- | -------- | ----------------- | ------------------------------------------------------------------------- |
| activeColor | string | false | Same as color | The hamburger's color when isActive is true |string
| animation | | true | ∅ | The animation mode |string
| className | | false | an empty string | An optional className that will go on every component's child |string
| color | | false | #000 | The hamburger's color |boolean
| isActive | | true | #000 | Determine hamburger's state |string
| label | | false | ∅ | Text displayed next to the hamburger |function
| onClick | | true | ∅ | Triggered function when hamburger is clicked |any
| ...others | | false | ∅ | All the props that an HTML Button can receive (such as id, role, etc ...) |
This component is really easy to customize. You can use css or styled-components if you prefer.
All elements in component have className (+ the one that you can add) which you can target:
- Button Element → zoburger__buttonzoburger__box
- Box (the hamburger wrapper) → zoburger__inner
- Inner ( the bars) →
If you prefer use styled components, you can import the styled components in order to customize them:
`jsx
import { Styled3dx } from 'react-zoburger';
import styled from 'styled-components;
const Wrapper = styled.div
${Styled3dx} {
height: 10px;
&::before, &::after {
height: 10px;
}
}`
As suggest by Jonathan Suh, i'm using ARIA to make this component more accessible for people with disabilities, with these attributes:
- aria-label="Menu"aria-controls="navigation"
- aria-expanded={isActive}
- type="button"
-
Most animations are made with CSS3 transforms` property, so it's supported by most browsers BUT IE9, olders, and Opera Mini. More informations.