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

react-action-bar allows you to simplify form submission and data updation with just a few lines of code.
https://github.com/mihir0699/react-action-bar

action-bar front-end npm package react

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mihir0699/react-action-bar
• Owner: mihir0699
• Created: 2021-11-06T05:44:34.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-11-07T09:48:01.000Z (over 3 years ago)
• Last Synced: 2025-04-15T00:43:50.938Z (2 months ago)
• Topics: action-bar, front-end, npm, package, react
• Language: JavaScript
• Homepage: https://npmjs.com/package/react-action-bar
• Size: 3.06 MB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-action-bar

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://video-chat-mihir.vercel.app/) [![Build passing](https://img.shields.io/badge/Build-Passing-brightgreen.svg?style=flat-square)](https://video-chat-mihir.vercel.app/) [![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=102)](https://video-chat-mihir.vercel.app/) [![License](https://img.shields.io/badge/license-MIT-brightgreen)](https://video-chat-mihir.vercel.app/) ![Made with Love in India](https://madewithlove.org.in/badge.svg)

# Demo

![enter image description here](https://raw.githubusercontent.com/mihir0699/react-action-bar/main/src/images/React%20App%20%283%29.gif?token=ALT5AMGLGAGNLX35YVJXM2LBSDGLY)

🎉 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 (

          


           

          

    );


}

## 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 | true     | 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!

[![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)

[![forthebadge](https://forthebadge.com/images/badges/built-by-developers.svg)](https://forthebadge.com)