https://github.com/wkornewald/ts-react-struct
TypeScript package for using React and immutable.js with type-safe cursors and a central event system (as a Redux alternative)
https://github.com/wkornewald/ts-react-struct
cursor cursors events immutable immutablejs react redux typescript
Last synced: 2 months ago
JSON representation
TypeScript package for using React and immutable.js with type-safe cursors and a central event system (as a Redux alternative)
- Host: GitHub
- URL: https://github.com/wkornewald/ts-react-struct
- Owner: wkornewald
- License: mit
- Created: 2017-06-24T23:09:33.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-07-27T12:31:37.000Z (almost 8 years ago)
- Last Synced: 2025-03-03T21:18:53.086Z (3 months ago)
- Topics: cursor, cursors, events, immutable, immutablejs, react, redux, typescript
- Language: TypeScript
- Homepage:
- Size: 33.2 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ts-react-struct
[](https://badge.fury.io/js/ts-react-struct)
[](https://npmjs.org/package/ts-react-struct)
[](https://travis-ci.org/wkornewald/ts-react-struct)
`ts-react-struct` is a TypeScript package for using `React` and `immutable.js` with type-safe cursors and a central event system.
The emphasis here is on type-safety.
You'll usually want to combine this with [ts-immutable-struct](https://github.com/wkornewald/ts-immutable-struct).
## Getting started
Install the package:
```sh
npm install --save ts-immutable-struct ts-react-struct
```
Example usage:
```typescript
import * as React from 'react'
import {ChangeEvent} from 'react'
import * as ReactDom from 'react-dom'
import {Struct, LeafRef} from 'ts-immutable-struct'
import {Component} from 'ts-react-struct'
interface Props extends React.HTMLProps {
valueRef: LeafRef,
}
class Input extends Component {
onChange = (event: ChangeEvent) => {
this.props.valueRef.val(event.target.value,event)
}
render() {
let props: Props = Object.assign({}, this.props)
delete props.valueRef
return
}
}
let data = Struct({
value: 'ahoy',
})
function render() {
return ReactDom.render(, document.getElementById('content'))
}
render()
data.observe((event, oldVal, newVal) => {
render()
})
```
Now, the state is always in sync with the DOM:
```typescript
data.get('value').deref()
// => "ahoy"
data.get('value').val('hola')
// => Input gets rerendered as
// <= user types "hey" into input field
data.get('value').deref() // => "hey"
```