React-styleless-form NPM

React styleless form

This package was inspired by antd form component. But this one without any antd dependencies, smaller, type-friendly and way more flexible. Feel free to just replace antd form with this one.

Package size in 7.71 kB │ gzip: 2.84 kB │ map: 33.43 kB

Examples - https://react-styleless-form.vercel.app/

Get started

Install this package

npm i react-styleless-form

Use it like this:

import { Form, FormItem } from "react-styleless-form";

const HelloWorldForm = () => {
  return (
    <Form
      onFinish={(fields) => {
        alert(JSON.stringify(fields, undefined, 2));
      }}
      id="myForm"
    >
      <FormItem
        name="name"
        label="Name"
        rules={[
          {
            required: true,
            message: "Name is required",
          },
        ]}
      >
        <TextInput />
      </FormItem>
      <FormItem name="city" label="City">
        <TextInput />
      </FormItem>
      <FormItem
        name="age"
        label="Age"
        rules={[
          {
            required: true,
            message: "Age is required",
          },
          {
            min: 18,
            type: "number",
            message: "you are too young :(",
          },
          {
            max: 100,
            type: "number",
            message: "you are too old :(",
          },
        ]}
      >
        <NumberInput />
      </FormItem>
      <button type="submit">Submit button</button>
    </Form>
  );
};

For more type support use createTypedForm method instead:

import { createTypedForm } from 'react-styleless-form';

type FormState {
  field1: string
  field2: number
}

const { Form, FormItem } =  createTypedForm<FormState>();

Styling

No CSS by default. You need to style form by you own. You can change classes prefix (.form by default) using CSSPrefix property. You can use renderLabel to customize and renderError for customize form error message.

CSS classes:

.form - tag.

.form__form-item - form item wrapper

.form__form-item__label - form item label ( tag)

.form__form-item__error - form item error

Look at ./storybook/styles.css as example.

Validation

You can pass array of validation rules to FormItem. Don't forget to set error message. You can control validation trigger using validationTrigger: ["onChange"] - trigger fires if value changed (debounced by 300ms) ["onFinish"] - trigger fires only after form submit

[
  {
    // throw an error if field value is undefined
    required: true,
    message: "Age is required",
  },
  {
    // if value < 18
    min: 18,
    type: "number",
    message: "some message",
  },
  {
    // if String().length > 100
    max: 100,
    type: "string",
    message: "some error",
  },
  {
    // if myPattern.test() === false
    type: "regexp",
    pattern: myPattern,
  },
  {
    // If value is not an email address
    type: "email",
  },
  {
    // if myValidator function throw an error or return Promise.reject
    validator: myValidator,
    message: "some error",
  },
];