# bubbleform

> 🥤 Lightweight ReactJS form validation library with Hooks

Latest version **1.6.2** (published 2023-05-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install bubbleform
pnpm add bubbleform
yarn add bubbleform
bun add bubbleform
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.2 |
| Published | 2023-05-24 |
| First published | 2023-05-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 24.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Emmanuel Oreoluwa |
| Maintainers | oreoluwadnd |
| Keywords | react, reactjs, react-hooks, react-hook, react-form, react-form-validation, react-validation, react-validation-hook, react-validation-hooks, react-validation-form, react-validation-form-hook, react-validation-form-hooks, react-form-validation-hook, react-form-validation-hooks, react-form-hook, react-form-hooks, react-forms, typescript, form |

## Links

- npm: https://www.npmjs.com/package/bubbleform
- Repository: https://github.com/oreoluwadnd/BubbleForm
- Homepage: https://github.com/oreoluwadnd/BubbleForm#readme
- Issues: https://github.com/oreoluwadnd/BubbleForm/issues
- npm.io page: https://npm.io/package/bubbleform

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.6.2 (latest) — 2023-05-24
- 1.6.1 — 2023-05-24
- 1.5.0 — 2023-05-22
- 1.0.0 — 2023-05-22

## README

# BubbleForm

 <img src="./header.png?raw=true">
   <br>
🥤 Lightweight ReactJS form validation library with Hooks
  <br>
  
## Table of Contents

1. [Installation](#Installation)
2. [Usage](#usage)
3. [configuration](#configuration)
4. [examples](#examples)
5. [License](#license)

## 💽 Installation

```
 npm install bubbleform
```

<br>

## 📄 Usage

### Install in your main ts or js file

```jsx
  import BubbleForm from "bubbleForm"  
  
  const {} = BubbleForm({})
```

<br>

## 🛠 Configuration

```jsx
const {
    data: loginData,
    handleChange,
    handleSubmit,
    errors,
    handleBlur,
  } = useForm({
    initialErrorMessage: loginErrorMessage,
    initialValues: loginFormData,
    sanitizeFn: (value) => {
      return value.trim();
    },
    validations: {
      email: {
        required: {
          value: true,
          message: "Email is required",
        },
        pattern: {
          value: "^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$",
          message: "Email is invalid",
        },
      },
      password: {
        required: {
          value: true,
          message: "Password is required",
        },
        pattern: {
          value: "^(?=.*[a-z])[a-zA-Z\\d]{8,}$",
          message: "Password must be at least 8 characters",
        },
        custom: {  
          length: { //any custom name 
            isValid: (value: any) => value.length > 6,
            message: "First name must be at least 8 characters",
          },
        },
      },
    },
    onSubmit: () => {
      dispatch(LoginApi(loginData));
    },
  });
```

<br>

## 📦 Props

Bubble Form takes in some parameter to work properly

| Params | Description | Type | Default |
| --- | --- | --- | --- |
| data | return object containing the form data | *`Object`* | none |
| handleChange | onChange event handler. Useful for when you need to track whether an input has been touched or not. This should be   passed to `<input onBlur={handleChange()} ... />` | *`Function`* | none |
| handleSubmit | Submit handler. This should be passed to `<form onSubmit={props.handleSubmit}>` </form> | *`Function`* | none |
| handleBlur | onBlur event handler. Useful for when you need to track whether an input has been touched or not. This should be passed to `<input onBlur={handleBlur()} ... />` | *`Function`* | none|

### 🛠 initialErrorMessage

 Initial error message to be displayed when the form is rendered for the first time should an empty string or an object with the same keys as the form data

```jsx
const loginErrorMessage = {
    email: "",
    password: "",
    };
    
```

<br>
### 🛠 initialValues

Initial values for the form data should an empty string or an object with the same keys as the form data

```jsx
const loginFormData = {
    email: "",
    password: "",
    };
    
```

<br>

### 🛠 sanitizeFn

A function that takes in the value of the input and returns the sanitized value

```jsx
const sanitizeFn = (value) => {
    return value.trim();
    };
    
```

<br>

### 🛠 validations

An object containing the validation rules for the form data

```jsx
const loginValidations = {
    email: {
        required: {
            value: true,
            message: "Email is required",
            },
        pattern: {
            value: "^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$",
            message: "Email is invalid",
            },
        },
    password: {
        required: {
            value: true,
            message: "Password is required",
            },
        pattern: {
            value: "^(?=.*[a-z])[a-zA-Z\\d]{8,}$",
            message: "Password must be at least 8 characters",
            },
            custom: { // take in an object of custom rules
            length: { //any custom name
                isValid: (value: any) => value.length > 6, // Function that takes in the value of the input and returns a boolean
                message: "First name must be at least 8 characters", // error message
                },
            },
        },
    };
```

<br>

## Issues

If you experience any anomaly or bug while using the component, feel free to create an issue on this repo
[issues](https://github.com/oreoluwadnd/BubbleForm/issues/new/choose)
<br>

## 👷🏽 Contribution Guide

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

---
_Source: https://npm.io/package/bubbleform · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._