Skip to content

useToggle

Hook for simple toggling the boolean value

Import

import useToggle from '@empeek-rnd-ui/hooks/useToggle';

Usage

//in your component
const SomeComponent = () => {
  const [value, toggleValue] = useToggle();

  return (
    <>
      <div>
        <input type="button" value={value ? 'Off' : 'On'} />
      </div>
      <div>Is on? - {value ? 'Yes' : 'No'}</div>
    </>
  );
}

Example

Is on? - No

import React from 'react';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

import useToggle from '@empeek-rnd-ui/hooks/useToggle';

const SomeComponent = () => {
  const [value, toggleValue] = useToggle();

  return (
    <Grid container direction="column">
      <Button onClick={toggleValue}>
        {value ? 'Off' : 'On'}
      </Button>

      <Typography>Is on? - {value ? 'Yes' : 'No'}</Typography>
    </Grid>
  );
};

export default SomeComponent;