form

React-action-bar: simplify form submission and data updation with just a few lines of code

Nov 09, 2021
React-action-bar: simplify form submission and data updation with just a few lines of code

react-action-bar

react-action-bar allows you to simplify form submission and data updation with just a few lines of code.

React-App--3-

🎉 react-action-bar allows you to simplify form submission and data updation with just a few lines of code.

Installation :

$ npm install react-action-bar $ yarn add react-action-bar

Features

  • No need to scroll up or down to save the form or update data.
  • Fully customisable.
  • Very light weight (~30kb)
  • Discard action button.

Code example:

import React from 'react'; import ActionBar from 'react-action-bar'; function App(){ return ( <div> <ActionBar isVisible={visible} primaryAction={handleSave} discardAction={handleDiscard} /> </div> );

}

Props

PropDescriptionTypeRequiredDefault
isVisibleaccepts a boolean to evaluate whether to show action barBooleantrue-
primaryActionaccepts a function to execute when primary action button is clickedfunctiontrue-
discardActionaccepts a function to execute when discard action button is clickedfunctiontrue-
messagemessage to display on the action barfunctiontrueUnsaved changes
backgroundColorbackground color of the action barstringfalse#000
primaryColorprimary color of the action barstringfalse#008060
primaryTitletitle of the primary action buttonstringfalseSave
discardTitletitle of the discard action buttonstringfalseDiscard

GitHub

https://github.com/mihir0699/react-action-bar

Recommended