# @microstates/react

> Provides useType hook

Latest version **0.12.0** (published 2019-02-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @microstates/react
pnpm add @microstates/react
yarn add @microstates/react
bun add @microstates/react
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.12.0 |
| Published | 2019-02-08 |
| First published | 2018-03-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 43 |
| Author | Taras Mankovski |
| Maintainers | cowboyd, sivakumar-kailasam, taras |
| Keywords | react, microstates, state-management, statecharts, finite-state-machine |

## Links

- npm: https://www.npmjs.com/package/@microstates/react
- Repository: https://github.com/microstates/react
- Homepage: https://github.com/microstates/react#readme
- Issues: https://github.com/microstates/react/issues
- npm.io page: https://npm.io/package/@microstates/react

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.12.0 (latest) — 2019-02-08
- 0.12.0-alpha.0 — 2018-11-09
- 0.9.0 — 2018-07-28
- 0.8.0 — 2018-06-20
- 0.7.1 — 2018-05-22
- 0.7.0 — 2018-05-18
- 0.6.2 — 2018-03-04
- 0.6.1 — 2018-03-04

## README

# @microstates/react

[![Build Status](https://travis-ci.org/microstates/react.svg?branch=master)](https://travis-ci.org/microstates/react) [![Greenkeeper badge](https://badges.greenkeeper.io/microstates/react.svg)](https://greenkeeper.io/)

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](#microstates-with-react-class-components) section.*

## Installation

```bash
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.

```jsx
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.

```jsx
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.

---
_Source: https://npm.io/package/@microstates/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._