0.0.19 • Published 5 years ago
@ragg/fleur-react v0.0.19
🌼 fleur-react ⚛️
@ragg/fleur
connector for React.
(See @ragg/fleur
for basic usage.)
Example
Hooks style:
// ./components/AppRoot.tsx
import React, { useCallback } from 'react'
import { useComponentContext, useStore } from '@ragg/fleur-react'
import { increaseOp } from './operations'
export const AppRoot = props => {
const context = useComponentContext()
const { count } = useStore([CountStore], getStore => ({
count: getStore(CountStore).getCount(),
}))
const handleCountClick = useCallback(() => {
context.executeOperation(increaseOp)
}, [])
return <div onClick={handleCountClick}>{count}</div>
}
Class style:
// ./components/AppRoot.tsx
import React from 'react'
import {
createElementWithContext,
connectToStores,
withComponentContext,
} from '@ragg/fleur-react'
import { increaseOp } from './operations'
import CountStore from './stores/CountStore'
export default withComponentContext(
// pick Props from Store with `connectToStores()`
connectToStores([CountStore], getStore => ({
count: getStore(CountStore).getCount(),
}))(
class AppRoot extends React.PureComponent {
private handleCountClick = () => {
// ** `this.props.{executeOperation, getStore}` provide by `withComponentContext()`
this.props.executeOperation(increaseOp)
}
render() {
return <div onClick={this.handleCountClick}>{this.props.count}</div>
}
},
),
)
import Fleur, { Store, listen, operation, action } from '@ragg/fleur'
import { createElementWithContext, FleurContext } from '@ragg/fleur-react'
import AppRoot from './components/AppRoot'
import CountStore from './stores/CountStore'
const app = new Fleur({ stores: [ CountStore ] })
const context = app.createContext()
ReactDOM.render(<FleurContext value={context}><AppRoot /></FluerContext>, {})
0.0.19
5 years ago
0.0.18
5 years ago
0.0.17
5 years ago
0.0.16
5 years ago
0.0.15
5 years ago
0.0.15-pre.1
5 years ago
0.0.14
5 years ago
0.0.14-pre.1
5 years ago
0.0.13
5 years ago
0.0.12
5 years ago
0.0.11
5 years ago
0.0.10
5 years ago
0.0.9
6 years ago
0.0.8
6 years ago
0.0.7
6 years ago
0.0.6
6 years ago
0.0.5
6 years ago
0.0.4
6 years ago
0.0.3
6 years ago
0.0.1
6 years ago
0.0.0
6 years ago