flashbang
v0.0.7
Published
small set of awesome react utilities
Downloads
15
Readme
flashbang
Install
npm install flashbang
Query State
Stores state in the url. Useful for search pages. Must be rendered inside react-router v4.
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!
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
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.
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.