The JavaScript blog.


libraries node modules components react-native react

React Component Playground, React Native Fish

Posted on .

React Component Playground

I have a backlog of React submissions, so I thought I'd work through them rather than spacing them out over a few weeks. First, React Component Playground (GitHub: FormidableLabs/component-playground, License: MIT, npm: component-playground) by Ken Wheeler is a React component that allows you to edit a React component with a live preview. You can try it out on the project's homepage -- see the button example near the top.

Normally with React/Angular/etc. you're constantly waiting for the build/refresh cycle, but with this project you can experiment a little bit to get results more quickly. As the example suggests, this is useful when working with React styles.

The same author also wrote nuka-carousel (GitHub: kenwheeler/nuka-carousel, License: MIT, npm: nuka-carousel), which is a React carousel component.

React Native Fish

Fish example

If you're looking for a fun React Native project, then check out Ivan Starkov's react-native-fish (GitHub: istarkov/react-native-fish). It's a graphical experiment that generates a trial of objects that looks like a fish. It's pure JavaScript and doesn't use any images.

It's interesting to see how React Native can be used to draw abstract things that aren't NSWhateverViews. I noticed that it uses arrays from the gl-matrix module, and immutable.


ES6 react material-design WebComponent

React Mount, Angular Material Design Dashboard

Posted on .

React Mount

If you want to use React more like web components, by including custom tags in HTML rather than JSX files, then take a look at Philipp Adrian's react-mount (GitHub: greenish/react-mount, License: MIT, npm: react-mount). All you need to do is define a React class with React.createClass, then mount it with React.mount. The HTML is then transformed to JSX by react-mount.

You can even nest components, so you can use it much the same way as you'd usually use React components. You can use expressions with curly braces to access props:

<translucent-component attribute={props.attribute}>  
    <p>Less than four list items? </b>{props.list.length <= 3 ? "Yes!" : "No!"}</b></p>
        {props.list.map(function(value, i){
            return <li key={i} >{value}</li>;

Angular Material Design Dashboard

Tushara Fernando has created a starting point for an Angular 1.3 Material Design application that uses ES6 and Karma/Protractor for tests: Excelian/Angular-Material-ECMA6-Dashboard.

The markup uses components, and there are components for alerts, a side menu, and a navigation bar. The way it uses ES6 modules with Angular is based on the GoCardless skeleton app.


ui react

react-markdown-editor, react-tagsinput

Posted on .


react-markdown-editor (GitHub: jrm2k6/react-markdown-editor, License: MIT, npm: react-markdown-editor) by Jeremy Dagorn is a React/Reflux Markdown editor. It's designed to work with Bootstrap and Font Awesome, and there's a demo that has buttons for bold, italic, headers, and sub-headers.

The MarkdownEditor component expects one prop, initialContent, and you can listen for changes on MarkdownEditorContentStore. Markdown processing is handled by markdown-js.



I needed to implement tags in a React project, and I found (and liked) react-tagsinput (GitHub: olahol/react-tagsinput, License: MIT, npm: react-tagsinput) by Ola Holmström.

Given an array of strings, it's very easy to drop into a project, but you can also use it with components instead of strings. The props are exactly the ones I needed for my project (onTagAdd and onTagRemove). I heavily modified the CSS, but the example CSS looks great.

It comes with tests written using Mocha, and it's easy to install from npm or Bower.


css react flux

React Inline, FluxThis

Posted on .

React Inline

If you're looking for a solution for managing CSS in React projects, then take a look at React Inline (GitHub: martinandert/react-inline, License: MIT, npm: react-inline) by Martin Andert. It transforms inline styles into CSS code and class names, so you get a CSS file and a list of class names.

There's an example that shows how the StyleSheet.create syntax can be turned into a more succinct const styles object with a corresponding CSS file.

The project has tests (that are written with ES6 with Babel), and there's a demo site.


Josh Horwitz sent in FluxThis (GitHub: addthis/fluxthis, License: Apache 2, npm: fluxthis), a Flux framework by AddThis. It's designed to make debugging easier, and comes with immutability and performance optimisations.

For more on immutability, see the immutable stores documentation. There's also a non-immutable store known as the ObjectOrientedStore. Internally the project uses immutable, and Babel is also used so all of the internal FluxThis code is ES6.


frameworks libraries reactive react

WebRx, Flummox

Posted on .


Oliver Weichhold sent in WebRx (GitHub: oliverw/WebRx, License: MIT), a new MVVM framework built on ReactiveX for JavaScript. It combines ideas from several libraries, including a router inspired by Angular's UI-Router, and bindings inspired by Knockout. It also supports dependency injection, components, modules, and routing.

The choice of patterns and JavaScript idioms means you get an interesting blend of Angular, Knockout, and Rx. If you're an Rx or TypeScript developer then it may appeal to you. It might even work if you're using Knockout with plain old JavaScript but want to move to a framework to aid with your application's architecture.


Asaf Katz sent in Flummox (GitHub: acdlite/flummox, License: MIT, npm: flummox) by Andrew Clark. Flummox is a Flux library that provides higher-level encapsulation: you can combine all of your stores, actions, constants, and the dispatcher into a single class. The class has no global references or singletons, which seems ideal for testing. The author argues that this makes isomorphism more straightforward -- imagine being able to load the same module on the client and server without any messy internal dependencies and state.

The primary goal of Flummox is reduce the boilerplate involved in setting up Flux for your application, so the API has been kept as minimal and predictable as possible. It uses Facebook's dispatcher under the hood. It encourages (but does not require) the use of ES6 classes. The state API for stores mirrors the state API for React components. Everything works as you'd probably expect.

Using Flummox with React requires adding event listeners, but Andrew recommends doing this with FluxComponent or fluxMixin.