https://github.com/mfix22/actionsack
🎒React UX components for handling common interactions
https://github.com/mfix22/actionsack
Last synced: 3 months ago
JSON representation
🎒React UX components for handling common interactions
- Host: GitHub
- URL: https://github.com/mfix22/actionsack
- Owner: mfix22
- License: mit
- Created: 2019-08-08T20:19:47.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-27T04:30:21.000Z (over 2 years ago)
- Last Synced: 2024-10-12T13:11:29.624Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 3.58 MB
- Stars: 12
- Watchers: 2
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Action Sack 🎒
> Collection of React user-experience hooks + containers for common interactions
[](http://makeapullrequest.com)
## Getting Started
```bash
yarn add actionsack
```
## Usage
### `useAsyncCallback`
> 🎣 `hook`
Takes any function and gives you a loading and error state. Good for handling
general asynchronous interactions.
```js
import { useAsyncCallback } from 'actionsack'
function MyAsyncButton(props) {
const [onClick, { loading, error, data }] = useAsyncCallback(props.onClick)
return (
<>
{error && {error}!}
{loading ? 'Saving...' : 'Save'}
{data && Success! {data}}
>
)
}
```
### `useKeyboardListener`
> 🎣 `hook`
Pass it a keyboard key and a handler to automatically listen for keyboard clicks.
##### Example
```js
import { useKeyboardListener } from 'actionsack'
function Modal(props) {
useKeyboardListener('Escape', props.onClose)
return
Hello World
}
```
### `useTempValue`
> `hook` 🎣
Hook that gives you a temporary state value that you can either commit with `submit` or revert with `reset`.
##### Example
```javascript
import { useTempValue } from 'actionsack'
function MyForm(props) {
const initialName = props.name
const { hasChanged, value, onInputChange, submit, reset } = useTempValue(initialName)
return (
e.preventDefault()}>
Submit
Cancel
)
}
```
### `useCopyTextHandler`
> `hook` 🎣
Creates an `onClick` handler that copies the text you pass in, and updates the `copied` field accordingly.
**Note**: you must pass `onClick` to a `` in order to copy the text.
For more information about `options`, see [API](https://github.com/sudodoki/copy-to-clipboard#api).
##### Example
```javascript
import { useCopyTextHandler } from 'actionsack'
const options = {
interval: 2 * 1000, // 2 seconds
format: "text/html",
}
function MyCopyButton() {
const { onClick, copied } = useCopyTextHandler('https://github.com/mfix22/actionsack', options)
return {copied ? 'COPIED!' : 'Copy URL'}
}
```
### `useOnline`
> `hook` 🎣
Subscribes to whether the network is online or off
##### Example
```javascript
import { useOnline } from 'actionsack'
function MyComponent() {
const online = useOnline()
return You are {online ? 'online' : 'offline'}
}
```
### `TimeWindow`
Show children after a certain amount of time, for a certain amount of time.
##### Example
```js
import { TimeWindow } from 'actionsack'
function MyMessage() {
return (
Timed Message!
)
}
```
### `Modal`
> `wrapper HOC` component
Class controlled Modal component with click-away and ESC-key to close
##### Example
```javascript
import {Modal} from 'actionsack'
this.setState({ open: false})}>
>
```
### License
MIT