schemy-forms
TypeScript icon, indicating that this package has built-in type declarations

0.0.8 • Public • Published

Schemy Forms

Library for autobuilding React forms using Schemy.

This is in early development. Not all types are supported yet, and some are buggy. Use carefully.

Basic usage

Login form example

Just create your schema as you usually do, and then render the form

import { Schemy, SchemyForm } from 'schemy-forms';

// Build schema
const loginSchema = new Schemy({
    email: { type: String },
    password: { type: String }
});

// In your component
return (
    <SchemyForm schema={loginSchema} />
);

Customize the fields

There are some extra settings that you can use to customize your form.

import { Schemy, SchemyForm } from 'schemy-forms';

const accountSchema = new Schemy({
    name: {
        type: String,
        label: 'Full name' // You can customize the input label
    },
    email: {
        type: String,
        min: 1,
        message: 'You must provide an email address'
    },
    password: {
        type: String,
        required: true,
        isPassword: true, // This tells Schemy to mask the input values
    }
});

// ...
return (
    <SchemyForm schema={accountSchema} />
);

Some of these settings are not supported by Schemy, so make sure you are using our bundled schemy which has been extended to support them.

Advanced usage

You can also use hooks to have more control over the form

import { useSchemy } from 'schemy-forms';

const RegisterPage = () => {
    const { form, values, isValid, isTouched } = useSchemy({
        email: { type: String },
        password: { type: String, isPassword: true }
    });

    const handleSubmit = async () => {
        await fetch('/some-api', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(values)
        });
    }

    // form contains the generated Form
    // You can just include it in your JSX and it will render
    return (
        <div className="register-page">
            <h1>
                New Account
                <em>{(isTouched) ? 'Unsaved changes' : ''}</em>
            </h1>
            <div className="form">
                {form}
            </div>
            <div className="footer">
                <button disabled={!isValid}>Submit</button>
            </div>
        </div>
    );
}

Readme

Keywords

none

Package Sidebar

Install

npm i schemy-forms

Weekly Downloads

2

Version

0.0.8

License

MIT

Unpacked Size

43.7 kB

Total Files

22

Last publish

Collaborators

  • aeberdinelli