# rc-4rm
> React bootstrap forms
Latest version **0.1.7** (published 2022-10-17) · MIT license · 0 weekly downloads
## Install
```sh
npm install rc-4rm
pnpm add rc-4rm
yarn add rc-4rm
bun add rc-4rm
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.1.7 |
| Published | 2022-10-17 |
| First published | 2022-10-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 590.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Alexander Pershin |
| Maintainers | alexander_pershin |
| Keywords | react, bootstrap, form |
## Links
- npm: https://www.npmjs.com/package/rc-4rm
- Repository: https://github.com/AlexanderPershin/rc-4rm
- Homepage: https://github.com/AlexanderPershin/rc-4rm#readme
- Issues: https://github.com/AlexanderPershin/rc-4rm/issues
- npm.io page: https://npm.io/package/rc-4rm
## 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.1.7 (latest) — 2022-10-17
- 0.1.6 — 2022-10-15
- 0.1.5 — 2022-10-12
- 0.1.4 — 2022-10-11
- 0.1.3 — 2022-10-11
- 0.1.2 — 2022-10-09
- 0.1.1 — 2022-10-09
- 0.1.0 — 2022-10-09
## README
# rc-4rm
Customizable react forms with build-in validation and state managment
### Installation
```
yarn add rc-4rm
```
or
```
npm install rc-4rm
```
### Usage
```js
import { SignForm } from "rc-4rm";
...
const handleSubmit = (data) => {
console.log("handleSubmit, data", data);
// Send data to server here with AJAX request
return new Promise((resolve) => {
setTimeout(resolve, 2000);
});
};
...
return (
);
```
### API
#### `SignForm`
| prop | type | description |
| --------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
| handleSubmit | (data) => void | callback function triggered on `onSubmit`, sends `data` object `{ email, password }` |
| className | string | class added to bootstrap form classes |
| clearAfter | boolean | should form fields be set to empty string after promise resolved |
| isConfirmPass | boolean | confirm password input for signing up |
| isCheck | boolean | check me out checkbox |
| labels | {"email": "Enter email", ...} | object with labels for inputs |
| info | {"email": "Should be valid email", ...} | object with information for inputs |
| successFeedback | {"email": "Email is valid", ...} | object with success feedback for inputs validation |
| errorFeedback | {"email": "Email is invalid", ...} | object with error feedback for inputs validation |
| validators | {"email": (value: string) => /\S+@\S+\.\S+/.test(value), ...} | object with validator functions for each field |
SignForm Extended example
```js
/\S+@\S+\.\S+/.test(value),
password: (value: string) => value.length > 6,
isCheckOut: (value: boolean) => value,
}}
labels={{
email: "Enter your email",
password: "Create a password",
password2: "Repeat password",
isCheckOut: "Remember me",
}}
info={{
email: "We'll never share your email with anyone else",
password:
"Should contain letters, uppercase letters, numbers and symbols",
password2: "Enter your password again",
isCheckOut: "Increase authentication validity time",
}}
successFeedback={{
email: "Email is valid",
password: "Password is valid",
password2: "Passwords match",
}}
errorFeedback={{
email: "Email is invalid",
password: "Password is invalid",
password2: "Passwords don't match",
isCheckOut: "You must agree",
}}
/>
```
#### `CustomForm`, currently supported only the following field types: text, email, password, select
| prop | type | description |
| ------------- | ----------------- | ------------------------------------------------------------------------------------ |
| handleSubmit | (data) => void | callback function triggered on `onSubmit`, sends `data` object `{ email, password }` |
| className | string | class added to bootstrap form classes |
| clearAfter | boolean | should form fields be set to empty string after promise resolved |
| fields | CustomFormField[] | Array describing form fields (type desc below) |
| requiredLabel | string | String near field label signifying that field is required. Default is "\*" |
#### `CustomFormField`
| prop | type | description |
| ------------ | ------------------------------ | ------------------------------------------------------ |
| id | number | unique id for a field |
| type | InputType | html input type |
| name | string | unique input type name |
| label | string | input label |
| validator? | (value: InputValue) => boolean | function to check if input value is correct |
| placeholder? | string | input placeholder |
| required? | boolean | determines if form can be submitted without this field |
| multible? | boolean | select input only, determines multiple options select |
| options? | ReactSelectOption[] | array of select options objects |
`InputType = text | email | password | select`
`InputValue`: `string` for text inputs, `boolean` for checkboxes etc.
```ts
interface RectSelectOption = {
label: string;
value: string;
}
```
### `CustomForm` usage
```js
```
CUSTOM_FORM_FIELDS_DATA example
```js
const CUSTOM_FORM_FIELDS_DATA: CustomFormItem[] = [
{
id: 1,
type: "text",
name: "username",
label: "Username",
validator: (value: string) => value.length > 2,
placeholder: "Fancy username",
required: false,
},
{
id: 2,
type: "text",
name: "email",
label: "Email",
validator: emailValidator,
placeholder: "Your email",
required: true,
},
{
id: 3,
type: "password",
name: "password",
label: "Enter password",
validator: passwordValidator,
required: true,
},
{
id: 4,
type: "select",
name: "languages",
label: "Your languages",
validator: (value: any[]) => value.length > 1,
required: true,
multiple: true,
options: [
{
value: "en",
label: "English",
},
{
value: "fr",
label: "French",
},
{
value: "es",
label: "Spanish",
},
],
},
];
```
## LICENSE [MIT](https://github.com/AlexanderPershin/rc-4rm/blob/master/LICENCE.md)
Copyright (c) 2022 Alexander Pershin
---
_Source: https://npm.io/package/rc-4rm · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._