Description

• Simple lock button.

Usage

npm install --save react-async-button-z

Import the module in the place you want to use:

import AsyncButton from "react-async-button-z";
import "react-async-button-z/build/styles.css";

Snippet

    // handler by props
    const [isAsync, setAsync] = useState(false)

    const fetchApi() {
        setAsync(true)
        fetch('')....finally(() => setAsync(false))
    }

    <AsyncButton isAsync={isAsync} onClick={fetchApi} text="abcd" />

    // handler by async Promise
    const fetchApi = () => {
        return new Promise(resovle => {
            // do something
            setTimeout(() => {
                // make done
                resovle()
            }, 5000)
        })
    }

    <AsyncButton asyncFunc={fetchApi} text="abcd" loadingText="loading" />

Props

| props | type | description | |----------------------|-------------------------------|----------------------------------------------------------------------------| | className | String | | | theme | String | default: ring | | indicatorColor | String | default: #000000 | | size | Number | default: 10 (indicator size) | | isAsync | boolean | your handler async by props (change true /false ) | | onClick | func | your handler async by props | | text | any | better if it is string label | | loadingText | any | when async | | timeout | number | if auto make icon async (default: 0 => none) | | asyncFunc | func | your handler async by a promise |

Note

Example

LIVE EXAMPLE

A working example can be found in the example directory.

npm install

npm run dev
npm run start

License

MIT