react-action-bar

    !Made with Love in India

Demo

!enter image description here

🎉 react-action-bar allows you to simplify form submission and data updation with just a few lines of code by introducing a fixed bar on the top of the screen and letting the user perform the actions by passing props.

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 (

}

Props

| Prop | Description | Type | Required | Default |
| :-------------- | ------------------------------------------------------------------- | -------- | -------- | --------------- |
| isVisible | accepts a boolean to evaluate whether to show action bar | Boolean | true | - |
| primaryAction | accepts a function to execute when primary action button is clicked | function | true | - |
| discardAction | accepts a function to execute when discard action button is clicked | function | true | - |
| message | message to display on the action bar | function | false | Unsaved changes |
| backgroundColor | background color of the action bar | string | false | #000 |
| primaryColor | primary color of the action bar | string | false | #008060 |
| primaryTitle | title of the primary action button | string | false | Save |
| discardTitle | title of the discard action button | string | false | Discard |

Contribute

Show your ❤️ and support by giving a ⭐. Any suggestions are welcome!