mirror of
https://github.com/zhigang1992/stateful.git
synced 2026-04-29 03:35:24 +08:00
Update readme
This commit is contained in:
26
README.md
26
README.md
@@ -13,14 +13,30 @@ npm install --save @zhigang1992/stateful
|
||||
## Usage
|
||||
|
||||
```jsx
|
||||
import React, { Component } from 'react'
|
||||
import React, { Component, Fragment } from 'react'
|
||||
|
||||
import MyComponent from '@zhigang1992/stateful'
|
||||
import Stateful, {Onmount} from '@zhigang1992/stateful'
|
||||
|
||||
class Example extends Component {
|
||||
render () {
|
||||
export default class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<MyComponent />
|
||||
<Stateful state={{count: 0, seconds: 0}}>
|
||||
{({ state, setState, getState }) => (
|
||||
<Fragment>
|
||||
<p>Clicked {state.count} times</p>
|
||||
<button onClick={() => setState({ count: state.count + 1 })}>
|
||||
Click me
|
||||
</button>
|
||||
<p>{state.seconds} seconds passed</p>
|
||||
<Onmount>{() => {
|
||||
// You can do stuff like firing a network request in here
|
||||
window.setInterval(() => {
|
||||
setState({seconds: getState().seconds + 1})
|
||||
}, 1000)
|
||||
}}</Onmount>
|
||||
</Fragment>
|
||||
)}
|
||||
</Stateful>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user