Repository files navigation

A specializedstampit factory forReact.

Create React components in a way analogous toReact.createClass, but powered by asubset of thestampit API.

This library has been replaced byreact-stamp.

react-stampit can beinstalled via npm

npm install react-stampit

or bydownloading the latest release.

This library is the result of wondering about what other ways a React component could be represented.Stamps are a cool concept, and more importantly have proven to be a great alternative toReact.createClass and the ES2015class due to their flexibility and use of multiple kinds of prototypal inheritance.

react-stampit has an API similar toReact.createClass. The factory accepts two parameters, the React library and a description object.

stampit(React,{init:[],state:{},statics:{},// convenience props for React staticscontextTypes:{},childContextTypes:{}.propTypes:{},defaultProps:{},// ...methods});

The best part aboutstamps is their composability. What this means is thatn number of stamps can be combined into a new stamp which inherits each passed stamp's behavior. This is perfect for React, sinceclass is being pushed as the new norm and does not provide an idiomatic way to use mixins. (classical inheritance 😞). While stamp composability on the surface is not idiomatic, the conventions used underneath are; it is these conventions that provide a limitless way to extend any React component.

mixin1.jsx

exportdefault{componentWillMount(){this.state.mixin1=true;},};

mixin2.jsx

exportdefault{componentWillMount(){this.state.mixin2=true;},};

component.jsx

importstampitfrom'react-stampit';import*ascachefrom'react-stampit/utils/cache';constid=cache.uniqueId();exportdefaultReact=>{returncache.find(id)||cache.save(stampit(React,{state:{comp:false,mixin1:false,mixin2:false,},_onClick(){returnthis.state;},componentWillMount(){this.state.comp=true;},render(){return<inputtype='button'onClick={()=>this._onClick()}/>;},}),id);};

app.jsx

importReactfrom'react';importcomponentFactoryfrom'./component';importmixin1from'./mixin1';importmixin2from'./mixin2';constComponent=componentFactory(React).compose(mixin1,mixin2);/** * Do things */

shallowRenderer.render(<Component/>);constbutton=shallowRenderer.getRenderOutput();assert.deepEqual(button.props.onClick(),{comp:true,mixin1:true,mixin2:true},'should return component state with all truthy props');>>ok

You may have noticed several interesting behaviors.

• component is a factory

This design pattern is optional, but recommended. Component factories are react-stampit's solution for avoiding the often hard to debug problems created by multiple instances of React. Read more about thathere. By injecting the React library, we are able to guarantee the version and instance of React that a component will receive.

• caching

This goes hand in hand with designing components as factories. Node.js's internal caching will not work as expected for component factories, react-stampit's cache utility can be used as a replacement.

• no autobinding

Event handlers require explicit binding. No magic. This can be done using.bind or through lexical binding with ES2015arrow functions as shown in the example.

• nocall super

React methods are wrapped during composition, providing functional inheritance. Sweet.

• mixins are POJOs

This is shorthand syntax for:

stampit(null,{// stuff});

If you feel limited byclass, or want a fresh take onReact.createClass, maybe give react-stampit a try and learn more about whatstampit is all about. And please report any issues you encounter!

• API
• Composition logic
• Advanced use cases

• react-hello

• childContextTypes
• component testing