https://github.com/fahad19/tydel-react
React.js bindings for Tydel
https://github.com/fahad19/tydel-react
react react-bindings state-management tydel
Last synced: 10 months ago
JSON representation
React.js bindings for Tydel
- Host: GitHub
- URL: https://github.com/fahad19/tydel-react
- Owner: fahad19
- License: mit
- Created: 2016-07-23T22:22:06.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-08-08T20:00:38.000Z (over 9 years ago)
- Last Synced: 2025-04-08T15:05:01.843Z (10 months ago)
- Topics: react, react-bindings, state-management, tydel
- Language: JavaScript
- Homepage: http://tydel.js.org/integrations/react/index.html
- Size: 24.4 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tydel-react
> React bindings for Tydel
[](http://travis-ci.org/fahad19/tydel-react) [](https://www.npmjs.com/package/tydel-react)
Allows you to use [Tydel](https://github.com/fahad19/tydel) for managing your state in [React.js](https://github.com/facebook/react) applications.
## Installation
### npm
With [npm](https://npmjs.com):
```
$ npm install --save tydel-react
```
### Bower
With [Bower](https://bower.io):
```
$ bower install --save tydel-react
```
In your HTML file:
```js
```
## Usage
Import the modules first:
```js
// React
import { PropTypes, Component } from 'react';
import { render } from 'react-dom';
// Tydel
import { Types, createModel } from 'tydel';
import { Provider, connect } from 'tydel-react';
```
Let's define and instantiate a Model which will act as our state for the React application:
```js
// Model class
const AppState = createModel({
name: Types.string,
}, {
setName(name) {
this.name = name;
}
});
// instance
const appState = new AppState({
name: 'My new app'
});
```
Now that we have the `appState` model instance, let's create our root Component:
```js
class AppComponent extends Component {
render() {
const { name, setName } = this.props;
App name is: {name}
{/* Clicking here would update the name, and re-render the Component */}
setName('foo')}>
Click to set app name to `foo`
}
}
```
To inject `name` and `setName` as props to the Component, we need to decorate it with `connect` function:
```js
// `AppComponent` variable is now `App` after connecting
const App = connect(function mapModelToProps(model) {
// `model` is `appState`
return {
name: model.name,
setName: model.setName
};
// or we could just `return model;` here
})(AppComponent);
```
Now it's time to render it to DOM. Here we are gonna use the `` component and pass our `appState` as the model, so that all child Components, when using `connect()`, would be able to access the state:
```js
render(
,
document.getElementById('root') // mounts the app in
);
```
And you have a working React application with Tydel!
## API
### ``
The root component of your application needs to be wrapped with `` in order to pass the model around via React's context API.
To be imported as:
```js
import { Provider } from 'tydel-react';
```
Accepts only one prop called `model`. Pass your model instance there.
```js
import React from 'react';
import { render } from 'react-dom';
const rootElement = document.getElementById('root');
const model = new Model({...}); // your own Model class created by Tydel
const App = React.createComponent({...}); // your root Component
render(
);
```
### `connect(mapModelToProps)`
This function accepts a function `mapModelToProps`, which then accepts the model instance we initially passed via ``, and returns an object which is then injected as props in your custom Component.
Imagine your `mapModelToProps` function as this:
```js
function mapModelToProps(model) {
return {
name: model.name,
setName: model.setName
};
}
```
Now if you had your root component in a variable called `AppComponent`, we could connect it as:
```js
// React component
const AppComponent = React.createClass({...});
// connected component
const App = connect(mapModelToProps)(AppComponent);
```
Now, when the `App` component gets rendered somewhere, it would have access to `name` and `setName` in its props as `this.props.name` for example.
## License
MIT © [Fahad Ibnay Heylaal](http://fahad19.com)