React Submitter 🔄

A friendly interactive Submitter for ⚛️ React.

Demo

Features

✅ TS Support

✅ Zero dependencies

✅ No CSS import

✅ No Assets import : Spinner, Cancel & Retry icons are embedded in the component

✅ Demo mode : Instant hands-on

✅ Customization : Infinite number of loading steps, custom texts, colors & duration

✅ Ability to cancel triggered request

Use it with caution ⚠️:

Long texts will result in poor user experience.

Installation

With npm :

npm install react-submitter

With yarn :

yarn add react-submitter

Instant hands-on

function App() {

  return (
    <>
      <Submitter /> {/* will resolve (default).*/}
      {/* Or <Submitter demo={'reject'} /> will reject.  */}

    </>
  );
}

Standard usage

function App() {

  const handleSuccess = (data: any) => {
    // Do something with successful response
  }

  const handleFailure = (message: any) => {
    // Do something in case of failure
  }

  return (
    <div className="App">
      <Spinnter trigger={() => /* your fetcher goes here e.g fetch(url) */)} onSuccess={handleSuccess} onFailure={handleFailure} />
    </div>
  );
}

Asking Questions

If you have a question, feel free to contact me on this email [email protected].

License

This project is licensed under the GPL-3.0 License. See the LICENSE file for more info.