react-use-status v0.0.3

use-status

Use status is a small substitute for useState that should enable some syntactic sugar. It's also fully typesafe. The reactivity for the .value is not deeply reactive, so as of now it's not possible to alterate the value of a object inside the state and get a rerender.

installation

npm install use-status

example usage

import {useStatus} from 'react-use-status'
//or
import useStatus from 'react-use-status'

const count = useStatus(0)
return <>
  <button onClick={() => count(oldValue => oldValue+1)}>+</button>
  <button onClick={() => count.value--} >-</button>
  <button onClick={() => count(0)}>reset</button>

  {/* The next 2 lines are equivalent to get the value of the state*/}
  <p>{count.value}</p>
  <p>{count()}</p>
</>

Features

• Fully typesafe
• accessors
  • getter
    • e.g. count()
  • setter
    • e.g. count(0) or count((oldValue)=> newValue)
  • deep reactivity
    • e.g.

    count((oldValue)=>{
      oldValue.prop +=1;
      return oldValue;
    })

  • array reactivity
    • e.g.

    const array = useStatus([1,2,3]);
    array((oldValue)=>{
      oldValue.push(4);
      return oldValue;
    })

• value
  • get value
    • e.g. count.value
  • set value
    • basic usage
      • e.g. count.value = 0
    • deep reactivity
      • e.g. count.value.object.prop = 0
      • might require forced rerender
• reactive status
  • This would need a way to force a rerender of the component which is not ideal.
  • basic usage
    • e.g. const object = useReactive(object|array) and then object.prop = 10
  • deep reactivity
    • e.g. const object = useReactive(object|array) and then object.prop.object.prop = 10

Why?

Why not?

Also, it allows for a neat syntactic sugar, where it looks like 2 way binding, but it's not.

//component
const SomeLibComponent = ({model}:{model:Status<string>}) {
  return(
  <input value={model()} onChange={(e)=>model(e.target.value)} />)
}

//usage
const MyComponent = () => {
  const name = useStatus('');
  // this pretty much looks and feels like 2 way data binding
  return <SomeLibComponent model={name} />
}

MIT License © 2024 - Present Fischi20