Skip to content

Instantly share code, notes, and snippets.

@unbracketed
Last active August 29, 2015 14:17
Show Gist options
  • Save unbracketed/3caf3889516a5f8bf217 to your computer and use it in GitHub Desktop.
Save unbracketed/3caf3889516a5f8bf217 to your computer and use it in GitHub Desktop.
Riff on Omniscient-style component
//http://omniscientjs.github.io/playground/02-search/
// content component (pure)
var Match = React.createClass({
render: () => {(
<li>
<a href="{this.props.url}">{this.props.title}</a>
</li>
)}
})
// pure content component, but still has to deref the cursor
var MatchList = React.createClass({
render: () => {(
<ul>
{this.props.matches.toArray().map((lib, i) => {
<Match key='match-'+i title=lib.get('title') url=lib.get('url')/>
}
</ul>
)}
})
// Map atom (store) values to container component props
propMap = {
q: 'search',
libs: 'libs'
};
// container component
var Matches = component('Matches', propMap, function (props) {
var matches = props.libs.filter(lib => {
lib.get('title').indexOf(props.q) !== -1 || lib.get('url').indexOf(props.q) !== -1;
});
return <MatchList matches=matches/>
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment