Reim.js

Makes state dead simple ;)

Features

• 🤟 Update state by simply mutating it, thanks to immer

• 📏 All possible ways to use state in one: Unstated, React Hook, Redux, React-Values...

• 🔐 Immutable state

• ⚡ Small, 6kb gzip + minified

• 🌟 Typing support for Typescript & Flow

• ⚛ Supports Redux Dev Tools

Installation

$ yarn add reim react-reim

How Reim looks

"Hook" (React 16.7.0-alpha2+)

import React from 'react'
import reim from 'reim'
import {useReim} from 'react-reim'

function Counter() {
  const [count, {increment}] = useReim(10, {
    increment: () => state => state++,
    decrement: () => state => state--
  })

  return (
    <div>
      <button onClick={increment}>+</button>
      <div id="count">{count}</div>
    </div>
  )
}

"Unstated"

import React from 'react'
import reim from 'reim'
import {State} from 'react-reim'

const Toggle = () => (
  <State
    initial={false}
    actions={{toggle: () => state => !state}}
    onChange={console.log}
  >
    {(visible, {toggle}) => (
      <button onClick={toggle}>{visible}</button>
    )}
  </State>
)

"Redux"-like

import React from 'react'
import reim from 'reim'
import {withReim} from 'react-reim'

// create a store
const counter = reim({count: 10})

// create a presentational component
const Counter = ({visible, increment, decrement}) => (
  <div>
    <button onClick={decrement}>-</button>
    <div>{value}</div>
    <button onClick={increment}>+</button>
  </div>
)

// create a container component
const ConnectedCounter = witReim(
    store
    /* Filter */({first, last}) => ({full: `${first} ${last}`}),
    /* Actions */ {increment: amount => state => void (state.count += amount)}
)(Counter)

export default ConnectedCounter

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

License

MIT © IniZio