);
export default QueryState(example);
```
## Toggle
Toggle the display of data with three simple props!
- [source](/src/toggle.js)
- [tests](/tests/toggle.js)
- [example](/example/src/example/toggle.js)
```js
import { Toggle } from 'flashbang'
Swap
This is shown when toggled
This is shown when not toggled
```
## Paginate
Display 5 page numbers in either direction with next and previous buttons
- [source](/src/paginate)
- [tests](/tests/paginate.js)
- [example](/example/src/example/paginate.js)
Import the default css, or pass your own class names and use your own css!
```js
import { Paginate } from 'flashbang';
import 'flashbang/dist/paginate/style.css';
export default () => (
`?page=${page}`}
/>
);
```
## Async Action
Changes text depending on promise status. Blocks onClick if a promise is in the middle of resolving, or finished.
- [source](/src/async-action.js)
- [tests](/tests/async-action.js)
- [example](/example/src/example/async-action.js)
```js
import { AsyncAction } from 'flashbang'
new Promise(resolve => setTimeout(resolve, 100))}
before={
Create
}
during={
Creating...
}
after={Created!}
/>
```
## Examples
The `examples` directory is a `create-react-app` module, so you can `npm start` or `npm run build` to see the demos live.
---
_Source: https://npm.io/package/flashbang · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._