flashbang

flashbang

• QueryState
• Toggle
• Paginate
• Async Action

Install

npm install flashbang

Query State

Stores state in the url. Useful for search pages. Must be rendered inside react-router v4.

• source
• tests
• example

import { QueryState } from 'flashbang'

const example = ({ state, setState }) => (
  <div>
    <input
      value={state.test}
      onChange={e => setState({ test: e.target.value })}
    />
  </div>
);

export default QueryState(example);

Toggle

Toggle the display of data with three simple props!

• source
• tests
• example

import { Toggle } from 'flashbang'

<Toggle>
  <div toggle>Swap</div>

  <div on>This is shown when toggled</div>
  <div off>This is shown when not toggled</div>
</Toggle>

Paginate

Display 5 page numbers in either direction with next and previous buttons

• source
• tests
• example

Import the default css, or pass your own class names and use your own css!

import { Paginate } from 'flashbang';
import 'flashbang/dist/paginate/style.css';

export default () => (
  <Paginate
    page={5}
    pages={25}
    createURL={page => `?page=${page}`}
  />
);

Async Action

Changes text depending on promise status. Blocks onClick if a promise is in the middle of resolving, or finished.

• source
• tests
• example

import { AsyncAction } from 'flashbang'

<AsyncAction
  onClick={() => new Promise(resolve => setTimeout(resolve, 100))}
  before={<div>Create</div>}
  during={<div>Creating...</div>}
  after={<span>Created!</span>}
/>

Examples

The examples directory is a create-react-app module, so you can npm start or npm run build to see the demos live.