# @ibberson92/reactforms

> Custom form component for react applications.

Latest version **1.0.11** (published 2018-11-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install @ibberson92/reactforms
pnpm add @ibberson92/reactforms
yarn add @ibberson92/reactforms
bun add @ibberson92/reactforms
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.11 |
| Published | 2018-11-05 |
| First published | 2018-10-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 2.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | MikeIbberson |
| Maintainers | ibberson92 |
| Keywords | react, forms |

## Links

- npm: https://www.npmjs.com/package/@ibberson92/reactforms
- Repository: https://github.com/MikeIbberson/ReactiveForms
- Homepage: https://github.com/MikeIbberson/ReactiveForms#readme
- Issues: https://github.com/MikeIbberson/ReactiveForms/issues
- npm.io page: https://npm.io/package/@ibberson92/reactforms

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.4.2
- [moment](https://npm.io/package/moment.md) ^2.22.2

## 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.0.11 (latest) — 2018-11-05
- 1.0.10 — 2018-11-04
- 1.0.9 — 2018-11-02
- 1.0.8 — 2018-10-30
- 1.0.7 — 2018-10-30
- 1.0.6 — 2018-10-29
- 1.0.5 — 2018-10-29
- 1.0.4 — 2018-10-29
- 1.0.3 — 2018-10-26
- 1.0.2 — 2018-10-25
- 1.0.1 — 2018-10-24
- 1.0.0 — 2018-10-24

## README

# Reactive Forms

__This module is largely completed. That said, many more tests need writing and various files need refactoring. Much of this work exists in the development branch and will comprise the V2 release.__

## Basic Usage
The following example illustrates the most basic implementation of this module. Note the parent components `<Config />` and `<Notification />`: these are absolutely necessary, as explained in the documentation below (coming soon).

```javascript
    import Config, { Notification, Form, Field } from '@ibberson92/reactforms';
    
    const saveFormDataToConsole = formData => {
        console.log(formData);  
    };
    
    const alertOnComplete = data => {
        alert('Call done!');  
    };
    
    export default props => (
        <Config>
            <Notification>
                <Form service={saveFormDataToConsole} callback={alertOnComplete} submit="Save">
                    <Field name="firstField" label="My First Field" type="text" required />
                </Form>
            </Notification>
        </Config>
    );
```

## Custom Field Props
| Name | Value(s) | Required | Notes | 
|--|--|--|--|
| Type | "text", "phone", "email", "password", "credit", "textarea", "richtext", "date", "time", "select", "radio" or "checkbox" | Yes | Accepts any value; however, many come with pre-configured settings.
| Options | array or object (see snippet below) | Yes | Applies to select and radio types. |
| Name | string | Yes | Uses as the FormData key on form submission. |
| Value | string, integer or boolean | No | Provides a default value for the field. |
| Required | boolean | No | Marks as a required field. |
| Label | string | No | Displays a `<label></label>` tag in the output. |
| Description | string | No | Renders fine print for the field to expound on the label. |
``` javascript
    /**
    * @NOTE
    * Example of the "options" props value.
    * The simple object applies to select and radio fields alike.
    * The complex object applies to select exclusively.
    */

    let simpleSelectOptions = [{
        name: 'Simple Select',
        value: 1
    }];
    
    let groupSelectOptions = {
        groups: [{
            name: 'My First Group', 
            options: simpleSelectOptions
        }]  
    };
```

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