effector-react

Effector-react

React bindings for effector

Installation

npm install --save effector effector-react

Or using yarn

yarn add effector effector-react

Usage

import {createStore, combine, createEvent} from 'effector'

import {useStore} from 'effector-react'

const inputText = createEvent()
const text = createStore('').on(inputText, (state, payload) => payload)

const size = createStore(0).on(inputText, (state, payload) => payload.length)

const form = combine({
  text,
  size,
})

const Form = () => {
  const {text, size} = useStore(form)
  return (
    <form>
      <input
        type="text"
        onChange={e => inputText(e.currentTarget.value)}
        value={text}
      />
      <p>Length: {size}</p>
    </form>
  )
}

Try it

useStore in docs createStore in docs combine in docs createEvent in docs

Changelog

effector-react 20.7.1

• Improve useList hook typings for typescript by allowing usage as components' return value (fix DefinitelyTyped issue)

This code now works without type errors:

import {value createStore} from 'effector'
import {value useList} from 'effector-react'

const $users = createStore<User[]>([
  {
    username: 'alice',
    email: '[e-mail]',
    bio: '. . .',
  },
  {
    username: 'bob',
    email: '[e-mail]',
    bio: '~/ - /~',
  },
  {
    username: 'carol',
    email: '[e-mail]',
    bio: '- - -',
  },
])
const UserList = () => useList($users, ({username}) => <p>{username}</p>)

const App = () => (
  <div>
    <UserList />
  </div>
)