@microstates/react

Provides useType hook

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
4610May 25, 2021Dec 11, 2017Minified + gzip package size for @microstates/react in KB

Readme

@microstates/react

Build Status Greenkeeper badge

This package provides useType hook for React that supports useState hook.

If your version of React doesn't have useState, don't install this package. Go to Microstates with React Class Components section.

Installation

npm install --save @microstates/react

# or

yarn add @microstates/react

Usage

useType takes the same arguements as Microstates create but it provides you with a microstate that will re-render the component on every transition.

function App() {
  let number = useType(Number, 42);

  return (
    <>
      <span>{number.state}</span>
      <button onClick={() => number.increment()}>Increment</button>
    </>
  );
}

Microstates with React Class Components

It's easier to setup Microstates with React Class Component than to install a package that provides a component that does this. Here is how it's done.

import React from 'react';
import { create, Store } from 'microstates';

let initial = create(Number, 42);

class App extends React.Component {
  // this function will be invoked when transition is called
  // it will receive the next microstate. Set it onto your state.
  update = $ => this.setState({ $ });

  state = {
    // I'm using $ cause I'm bling like that, 
    // but you can use anything you want
    $: Store(initial, this.update)
  }

  render() {
    return this.state.$.state;
  } 
}

That's it.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.