Welcome to stuple!

A stuple (pronounced /stŭp′əl/) is very similar to the tuple returned by React's useState hook, except that a stuple is an object instead of an array.

so you can access the tuple's value and setter function by dot notation instead of array destructuring (or worse, array index notation).

Have you ever found yourself doing excessive prop drilling?

For example,

<MyNameComponent
  firstName={firstName}
  setFirstName={setFirstName}
  middleName={middleName}
  setMiddleName={setMiddleName}
  lastName={lastName}
  setLastName={setLastName}
/>

And asked yourself, is there an easy way to cut the props in half?

Yes!

Simply replace,

const [firstName, setFirstName] = useState('')

With,

const firstNameSt = useStuple('')

And now you can do,

<MyNameComponent
  firstNameSt={firstNameSt}
  lastNameSt={lastNameSt}
  middleNameSt={middleNameSt}
/>

And inside of MyNameComponent, you can access firstNameSt.val and firstNameSt.set.

Slicing a state.

A stuple can be sliced into a new stuple with subStuple function.

Nuts and bolts.

useStuple(...) is an alias for asStuple(useState(...)).

subStuple(...) is an alias for asStuple(subState(...)).

subState is API-compatible with useState.

Full API documentation.

For full documentation, see the API docs. This documentation is generated from the tsdoc comments in the source code. Feel free to contact me for questions or make PRs to improve the documentation comments.