Skip to content

A tiny helper for structuring React components in a way that's easy to create, maintain, reuse, and scale

Notifications You must be signed in to change notification settings

openride/spindle

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

67 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Spindle is a tiny helper for structuring React components in a way that's easy to create, maintain, reuse, and scale. And it's really fast, for free!

Spindle creates just plain-old regular React components, so you can immediately drop them into any React project, and you can always nest other React components inside spindle components. There is no tie-in. And at about 200 lines of JS, it's almost free to add to your project.

$ npm install spindle-ui results

Docs

Spindle lets you specify components with a few pure functions that fit together well. For example, a counter built out of Action, init, update, and view:

import React from 'react';
import ReactDOM from 'react-dom';
import { Union } from 'results';
import Spindle, { Update } from 'spindle-ui';

const Action = Union({
  Increment: null,
  Decrement: null,
});

const init = () =>
  Update({ model: 0 });

const update = (action, model) => Action.match(action, {
  Increment: () =>
    Update({ model: model + 1 }),
  Decrement: () =>
    Update({ model: model - 1 }),
});

const view = (model, dispatch) => (
  <p>
    <button onClick={dispatch.Decrement}>-</button>
    {model}
    <button onClick={dispatch.Increment}>+</button>
  </p>
);

const Counter = Spindle('Counter',
  { Action, init, update, view });


ReactDOM.render(<Counter />, document.getElementById('app'));

Compose your application by just nesting other components in your views. A cheeky example: here is how to write a pair of the above counters:

const pairView = () => (
  <div>
    <Counter />
    <Counter />
  </div>
);

const Pair = component('Pair', { view: pairView });

ReactDOM.render(<Pair />, document.getElementById('app'));

Spindle takes inspiration from the amazing elm language and architecture, but leverages React to do the bookkeeping. This makes it incredibly easy to nest components and add features without friction.

React propTypes can be specified on Spindle components. In fact, Spindle takes this concept a step further and lets you specify modelType, cbTypes, and even TypedActions!

immutablejs collections are supported (but completely optional!) for your component's model, providing a great option for keeping everything correct and fast.

To see how to solve lots of different UI challenges with Spindle, check out the examples/ folder in this repository:

Spindle aims to be extremely developer-friendly. A confusing error message is a bug, so if you find one, please open an issue!

What next?

Check out the Spindle guide

About

A tiny helper for structuring React components in a way that's easy to create, maintain, reuse, and scale

Resources

Stars

Watchers

Forks

Packages

No packages published