use-state-toggle
TypeScript icon, indicating that this package has built-in type declarations

0.1.1 • Public • Published

use-state-toggle

There a lot of similar libraries out there, but they only toggle boolean state. This hook allows you to toggle any state, by providing custom truthy or falsy values.

Sample usage

React Web

import React from 'react';
import {useStateToggle} from 'use-state-toggle';

const MyComponent = () => {
  const [switchState, toggleSwitch] = useStateToggle(false);

  const [didAccept, toggleDidAccept] = useStateToggle('no', {
    truthy: 'yes',
    falsy: 'no',
  });

  return (
    <div>
      <button onPress={toggleDidAccept}>
        Toggle Switch
      </button>
      <h1>Switch is on? {String(switchState)}</h1>

      <button onPress={toggleDidAccept}>
        Accept?
      </button>
      <h1>You said {didAccept}</h1>
    </div>
  );
};

export default MyComponent;

React Native

import React from 'react';
import {useStateToggle} from 'use-state-toggle';
import {Text, SafeAreaView, Button} from 'react-native';

const UseToggleStateSample = () => {
  const [switchState, toggleSwitch] = useStateToggle(false);

  const [didAccept, toggleDidAccept] = useStateToggle('no', {
    truthy: 'yes',
    falsy: 'no',
  });

  return (
    <SafeAreaView style={{flex: 1}}>
      <Button onPress={toggleDidAccept} title="Accept?" />
      <Text>You said {didAccept}</Text>
      <Button onPress={toggleSwitch} title="Toggle Switch" />
      <Text>Switch is on? {String(switchState)}</Text>
    </SafeAreaView>
  );
};

export default UseToggleStateSample;

License

use-state-toggle is MIT licensed, as found in the LICENSE file.

Package Sidebar

Install

npm i use-state-toggle

Weekly Downloads

4

Version

0.1.1

License

MIT

Unpacked Size

6.36 kB

Total Files

14

Last publish

Collaborators

  • karlmarxlopez