Effector-react
React bindings for effector
Installation
npm install --save effector effector-react
Or using yarn
yarn add effector effector-react
Usage

import {createStore, createStoreObject, createEvent} from 'effector'
import {createStoreConsumer} from 'effector-react'
const inputText = createEvent('input text')
const text = createStore('').on(inputText, (state, payload) => payload)
const length = createStore(0).on(inputText, (state, payload) => payload.length)
const store = createStoreObject({
text,
length,
})
const FormStore = createStoreConsumer(store)
const Form = () => (
<FormStore>
{state => (
<form>
<input
type="text"
onChange={e => inputText(e.currentTarget.value)}
value={state.text}
/>
<p>Length: {state.length}</p>
</form>
)}
</FormStore>
)
0.18.2
-
Fix webpack usage issue. To prevent this in a future, webpack integration test was added.
-
Improve typescript typings for createApi
. This code example became type checked
import {createStore, createApi} from 'effector'
const $text = createStore('')
const {addMessage, cut} = createApi($text, {
addMessage: (text, message) => text + `\n` + message
cut: (text, {fromIndex, size}) => text.slice(fromIndex, fromIndex + size),
})
- Add umd bundle to npm. Therefore, you can use cdn to include library without bundlers
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/effector@0.18.2/effector.umd.js"></script>
</head>
<body>
<script>
const header = document.createElement('h1')
document.body.appendChild(header)
const $text = effector.createStore('hello')
$text.watch(str => (header.innerHTML = str))
</script>
</body>
</html>