- Notifications
You must be signed in to change notification settings - Fork1
React.js bindings for Tydel
License
fahad19/tydel-react
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
React bindings for Tydel
Allows you to useTydel for managing your state inReact.js applications.
Withnpm:
$ npm install --save tydel-reactWithBower:
$ bower install --save tydel-reactIn your HTML file:
<!DOCTYPEhtml><html><body><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script><scriptsrc="bower_components/tydel/dist/tydel.min.js"></script><scriptsrc="bower_components/tydel-react/dist/tydel-react.min.js"></script></body></html>
Import the modules first:
// Reactimport{PropTypes,Component}from'react';import{render}from'react-dom';// Tydelimport{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:
// Model classconstAppState=createModel({name:Types.string,},{setName(name){this.name=name;}});// instanceconstappState=newAppState({name:'My new app'});
Now that we have theappState model instance, let's create our root Component:
classAppComponentextendsComponent{render(){const{ name, setName}=this.props;<div><p> App name is:{name}</p>{/* Clicking here would update the name, and re-render the Component */}<aonClick={()=>setName('foo')}> Click to set app name to `foo`</a></div>}}
To injectname andsetName as props to the Component, we need to decorate it withconnect function:
// `AppComponent` variable is now `App` after connectingconstApp=connect(functionmapModelToProps(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<Provider> component and pass ourappState as the model, so that all child Components, when usingconnect(), would be able to access the state:
render(<Providermodel={appState}><App/></Provider>,document.getElementById('root')// mounts the app in <div></div>);
And you have a working React application with Tydel!
The root component of your application needs to be wrapped with<Provider> in order to pass the model around via React's context API.
To be imported as:
import{Provider}from'tydel-react';
Accepts only one prop calledmodel. Pass your model instance there.
importReactfrom'react';import{render}from'react-dom';constrootElement=document.getElementById('root');constmodel=newModel({...});// your own Model class created by TydelconstApp=React.createComponent({...});// your root Componentrender(<Providermodel={model}><App/></Provider>);
This function accepts a functionmapModelToProps, which then accepts the model instance we initially passed via<Provider model={model}>, and returns an object which is then injected as props in your custom Component.
Imagine yourmapModelToProps function as this:
functionmapModelToProps(model){return{name:model.name,setName:model.setName};}
Now if you had your root component in a variable calledAppComponent, we could connect it as:
// React componentconstAppComponent=React.createClass({...});// connected componentconstApp=connect(mapModelToProps)(AppComponent);
Now, when theApp component gets rendered somewhere, it would have access toname andsetName in its props asthis.props.name for example.
MIT ©Fahad Ibnay Heylaal
About
React.js bindings for Tydel