react-animated-burgers

Usage

Install the package

``
npm i -S react-animated-burgers styled-components
`

or

`
yarn add react-animated-burgers styled-components
`

Import the desired component, for example

`
import { HamburgerArrow } from 'react-animated-burgers'
`

Pass in isActive boolean prop

`

`

Pass in toggleButton function prop

`

`

Pass in buttonColor & barColor string to change the color of the button & bars

`

`

Pass in buttonWidth number prop to change the size of the button. The width of the button will take as width value in px the passed in prop, button height & other properties will be calculated based on buttonWidth. Default buttonWidth is 40

`

`

Pass in buttonStyle prop for style overrides

`

`

If you prefer using classes pass in className

`

`

Example usage on Class components

`
import React, { Component } from 'react'
import { HamburgerArrow } from 'react-animated-burgers'

class App extends Component {
state = {
isActive: false
}

toggleButton = () => {
this.setState({
isActive: !this.state.isActive
})
}

render() {
return (

)
}
}

export default App
`

Example usage on Functional components

`
import React, { useState, useCallback } from 'react'
import { HamburgerArrow } from 'react-animated-burgers'

const App = () => {
const [isActive, setIsActive] = useState(false)

const toggleButton = useCallback(
() => setIsActive(prevState => !prevState),
[],
)

return (
buttonColor="#FFBC67"
barColor="white"
{...{ isActive, toggleButton }}
/>
)
}

export default App
``

Acknowledgments

- Based on Tasty CSS-animated Hamburgers https://jonsuh.com/hamburgers by Jonathan Suh