# rec-form

> Form component for browsers with React, ES6 and SASS.

Latest version **0.2.2** (published 2016-07-03) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install rec-form
pnpm add rec-form
yarn add rec-form
bun add rec-form
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2016-07-03 |
| First published | 2016-04-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Łaniewski Bartosz |
| Maintainers | bartozzz |
| Keywords | react, webpack, component, form |

## Links

- npm: https://www.npmjs.com/package/rec-form
- Repository: https://github.com/Bartozzz/rec-form
- Homepage: https://github.com/Bartozzz/rec-form#readme
- Issues: https://github.com/Bartozzz/rec-form/issues
- npm.io page: https://npm.io/package/rec-form

## Dependencies (5)

- [react](https://npm.io/package/react.md) latest
- [node-sass](https://npm.io/package/node-sass.md) latest
- [random-id](https://npm.io/package/random-id.md) latest
- [react-dom](https://npm.io/package/react-dom.md) latest
- [classnames](https://npm.io/package/classnames.md) latest

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

- 0.2.2 (latest) — 2016-07-03
- 0.2.1 — 2016-07-02
- 0.2.0 — 2016-07-02
- 0.1.9 — 2016-06-19
- 0.1.8 — 2016-06-19
- 0.1.7 — 2016-06-19
- 0.1.6 — 2016-06-19
- 0.1.5 — 2016-06-19
- 0.1.4 — 2016-06-19
- 0.1.3 — 2016-05-14
- 0.1.2 — 2016-05-14
- 0.1.1 — 2016-05-14
- 0.1.0 — 2016-05-14
- 0.0.3 — 2016-05-08
- 0.0.29 — 2016-05-01
- … 7 more at https://npm.io/package/rec-form/versions

## README

# ![Logo](https://cdn.rawgit.com/Bartozzz/rec-bootstrap/master/template/src/images/logo.svg) rec-form

> Form component for `React` written with ES6, SASS and [rec-bootstrap](https://github.com/Bartozzz/rec-bootstrap).

Radio buttons, etc, coming soon.

## Screenshot

![Screenshot](https://cdn.rawgit.com/Bartozzz/rec-form/master/screenshot.png)

## Usage

```javascript
import React                from "react";
import { Input, Button }    from "rec-form";

ReactDOM.render( (
    <div>
        <Input placeholder="Username" value="Predefined value" />
        <Input placeholder="Password" type="password" />
        <Input placeholder="Color" type="color" />
        <Input placeholder="Date" type="date" />
        <Input placeholder="Month" type="month" />
        <Input placeholder="Number" type="number" />
        <Input placeholder="Range" type="range" />
        <Button value="Back" disabled />
        <Button value="Next" />
    </div>
), document.getElementById( "app" ) );
```

You can also use the global variable `ReactForm`:

```javascript
let Input  = ReactForm.Input;
let Button = ReactForm.Button;
```

## Component API

### Input Component

Property    | Type                  | Default     | Required | Description
----------- | --------------------- | ----------- |:--------:|------------
placeholder | `String`              | `null`      | ✕        | Input placeholder
required    | `Boolean`             | `false`     | ✕        | Whether the input must be filled
value       | *                     | `null`      | ✕        | Input value
type        | `String`              | text        | ✕        | Input type

### Button Component

Property  | Type                | Default     | Required | Description
--------- | ------------------- | ----------- |:--------:|------------
disabled  | `Boolean`           | `false`     | ✕        | Whether the button is disabled
value     | `String`            | Ok          | ✕        | Button value

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