Installation

yarn add @noe-p/react-buttons-components

ToggleButtons

Usage

import { ToggleMenuButton } from '@noe-p/react-buttons-components';
import { useState } from 'react';

export function Button(): JSX.Element {
  const [isOpen, setIsOpen] = useState(false);
  return <ToggleMenuButton isMenuOpen={isOpen} onClick={() => setIsOpen(!isOpen)} />;
}

ToggleMenuButton

Required Props

| Props | Type | Description | | --- | --- | --- | | isMenuOpen | boolean | Boolean to change button state | | onClick | function(value: boolean) | Function to change button state |

Optional Props

| Props | Default | Type | Description | | --- | --- | --- | --- | | colorOpen | black | string | Bar colors when the menu is open | | colorClose | black | string | Bar colors when the menu is close | | width | 40 | number | Width and height (it’s a square) of the component (px) | | spaceBetweenBars | 35% | string | Space between the two bars (%) | | barThickness | 3 | number | Bar thickness (px) | | animationDuration | 0.3s | string | Animation duration | | mobileWidth | 30 | number | Mobile width and height (it’s a square) of the component (px) | | mobileBarThickness | 2 | number | Mobile bar thickness (px) | | styled | none | CSS | Custom style |

ToggleTextButton

Required Props

| Props | Type | Description | | --- | --- | --- | | isMenuOpen | boolean | Boolean to change button state | | onClick | function() | Function to change button state |

Optional Props

| Props | Default | Type | Description | | --- | --- | --- | --- | | textOpen | Menu | string | Text when the menu is close | | textClose | Close | string | Text when the menu is open | | animationSpeed | 0.2 | number | animation speed between character (seconds) | | animationOpacity | 50% | string | character opacity dureing animaiton | | fontSize | 25px | string | Font Size | | fontFamily | serif | string | Font Family | | closeColor | black | string | Text color nwhen the menu is open | | openColor | black | string | Text color nwhen the menu is close | | animationTranslation | 100% | string | Text animation translation | | mobileFontSize | 20px | string | Font Size on Mobile | | style | none | CSS Style | Custom css style |