https://github.com/sahilrajput03/usestatem

https://github.com/sahilrajput03/usestatem

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/sahilrajput03/usestatem
• Owner: sahilrajput03
• Created: 2020-11-18T11:52:13.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2021-02-25T10:48:32.000Z (almost 4 years ago)
• Last Synced: 2024-11-09T17:56:48.239Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 24.4 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# useStateM

This is a custom hook made on one of the gists of `Tanner Linsley`. This hook code includes the use of `immer.js` straight away to provide directly mutable abilities for the state but you must mutate state inside the callback function of `setState`.

Tip: You can simply import from  `usestatem` package with one of the two bindings.

```js

import { useState } from 'usestatem'

or

import {useStateM } from 'usestatem'

// Both are equally legit options though.

```

> Basically the name of package ( `usestatem` ) stands for `useState` react hook with **m**utable abilities.

## Examples

[Below example on codesandbox 🔥](https://codesandbox.io/s/usestatem-demo-for-npm-package-6pmyz?file=/src/App.js)

You can definitely expect below example to work out of the box.

```js

export default function App() {

  const [state, setState] = useStateM(

    {

      counter: {value: 10},

      time: {hours: 20, minutes: 30, seconds: {milliseconds: 40}}

    },

    false

  );

  let _number = useStateM(0);

  let [number, setNumber] = _number;

  return (

    


      
Hello useStateM

      

      `number`: {number}

      


      

      

      

      

      

      

      


      Special Case

      

    

  );

}


const PrettyPrint = ({object}) => (

  <>

    
{JSON.stringify(object, null, 2)}
 


  >

);


const Button1 = ({setState}) => {

  return (

    

        setState((state1) => {

          state1.counter.value++;

        })

      }

    >

      Button1 - Increment state.counter.value

    

  );

};

const B2 = ({setState}) => {

  return (

     {

        setState((state) => {

          state.time.hours += 2;

          state.time.minutes += 4;

        });

      }}

    >

      B2 - Increment (+2) hours and decrement (-4) minutes

    

  );

};

const B3 = ({setState}) => {

  return (

     setState((state) => state.time.seconds.milliseconds++)}

    >

      B3 - Increment state.time.milliseconds

    

  );

};

const B4 = ({setState}) => {

  return (

     setState((state) => state.time.seconds.milliseconds++)}

    >

      B4 - Increment state.time.milliseconds

    

  );

};

const B5 = ({setState, state}) => {

  /* Below example shows that older api remains working!! */

  return (

    

        setState({...state, counter: {value: state.counter.value + 2}})

      }

    >

      B5 - Increment state.counter.value by 2

    

  );

};

const B6 = ({state, setState}) => {

  /* Below example show a 100% working but I recommend you to mutate `state` inside the callback. */

  return (

     {

        state.counter.value += 3;

        setState(state); // Ideally it should be: setState(() => { state.counter.value += 3; })

      }}

    >

      B6 - Increment state.count.value by 3 (WORKS BUT, throws{' '}

      warning in the console)

    

  );

};

const B7 = ({_number}) => {

  let [number, setNumber] = _number;

  return (

    <>

       {

          number += 4; //This is possible with old setState api of react too. :joy:

          setNumber(number);

        }}

      >

        B7 - Increment `number` by 4

      {' '}

    >

  );

};

```

Thanks to `immerjs` and `Tanner Linsley`.