1.0.2 • Published 5 years ago

easy-ctx-form

Licence

MIT

Version

1.0.2

Deps

Size

82 kB

Vulns

Weekly

Summary Dependency Versions

easy-ctx-form

Setup

npm install hook-easy-form --save

Usage

Simple form example of a FaCC

import { FormContext, useField } from 'easy-ctx-form';

const Input = ({ name, value, type }) => {
  const { getInputProps, getMeta } = useField(name, { value, type });
  const { error, touched } = getMeta();
  return (
    <div>
      <input {...getInputProps()} />
      {touched && error && <span>{error}</span>}
    </div>
  );
};


export default () => {
  return (
    <FormContext
      onSubmit={(v) => console.log(v)}
    >
      {(props) => (
        <>
          <Input name="email" type="email" />
          <Input name="password" type="password" />
          <button type="submit" disabled={props.pristine}>
            submit
          </button>
        </>
      )}
    </FormContext>
  );
};

Simple form example without FaCC

import { FormContext, useField } from 'easy-ctx-form';

const Input = ({ name, value, type }) => {
  const { getInputProps, getMeta } = useField(name, { value, type });
  const { error, touched } = getMeta();
  return (
    <div>
      <input {...getInputProps()} />
      {touched && error && <span>{error}</span>}
    </div>
  );
};

const ChildrenComponent = (props) => {
  return (
    <>
      <Input name="email" type="email" />
      <Input name="password" type="password" />

      <div>
        <button type="submit" disabled={props.pristine}>
          submit
        </button>
        <button type="button" onClick={props.resetForm}>
          reset
        </button>
      </div>
    </>
  );
};


export default () => {
  return (
    <FormContext
      onSubmit={(v) => console.log(v)}
    >
      <ChildrenComponent />
    </FormContext>
  );
};

With validation example

import { FormContext, useField } from 'easy-ctx-form';

const Input = ({ name, value, type }) => {
  const { getInputProps, getMeta } = useField(name, { value, type });
  const { error, touched } = getMeta();
  return (
    <div>
      <input {...getInputProps()} />
      {touched && error && <span>{error}</span>}
    </div>
  );
};

const validate = (values) => {
  const errors = {};
  if (!values.email) {
    errors.email = 'Required';
  }
  if (!values.password) {
    errors.password = 'Required';
  }
  if (!values.check) {
    errors.check = 'Required';
  }

  return errors;
};

export default () => {
  return (
    <FormContext
      validate={validate}
      onSubmit={(v) => console.log(v)}
    >
      {(props) => (
        <>
          <Input name="email" type="email" />
          <Input name="password" type="password" />
          <Input name="check" type="checkbox" />
          <button type="submit" disabled={props.pristine}>
            submit
          </button>
        </>
      )}
    </FormContext>
  );
};

With initial values example

import { FormContext, useField } from 'easy-ctx-form';

const Input = ({ name, value, type }) => {
  const { getInputProps, getMeta } = useField(name, { value, type });
  const { error, touched } = getMeta();
  return (
    <div>
      <input {...getInputProps()} />
      {touched && error && <span>{error}</span>}
    </div>
  );
};

const initialValues = {
  email: 'test@test.com',
  password: 'qwerty'
};

export default () => {
  return (
    <FormContext
      initialValues={initialValues}
      onSubmit={(v) => console.log(v)}
    >
      {(props) => (
        <>
          <Input name="email" type="email" />
          <Input name="password" type="password" />
          <button type="submit" disabled={props.pristine}>
            submit
          </button>
        </>
      )}
    </FormContext>
  );
};

With typescript usage

All possible types you can find in library

import { FormContext, useField } from 'easy-ctx-form';
import { TErrors, TValues, OutgoingProps } from 'easy-ctx-form/build/types/common';

const Input = ({ name, value, type }) => {
  const { getInputProps, getMeta } = useField(name, { value, type });
  const { error, touched } = getMeta();
  return (
    <div>
      <input {...getInputProps()} />
      {touched && error && <span>{error}</span>}
    </div>
  );
};

const validate = (values: TValues) => {
  const errors: TErrors = {};
  if (!values.email) {
    errors.email = 'Required';
  }
  return errors;
};


export default => {
  return (
    <FormContext
      onSubmit={(v) => console.log(v)}
      validate={validate}
      style={{ width: '100%' }}
    >
      {(props: OutgoingProps) => (
        <>
          <Input name="firstName" />
          <Input name="lastName" />
          <Input name="email" type="email" />
          <Input name="sex" type="radio" value="male" />
          <Input name="sex" type="radio" value="female" />
          <Input name="sex" type="radio" value="other" />
          <Select name="color" type="select" />
          <Input name="employed" type="checkbox" />
          <Input name="note" type="text-area" />
          <button type="submit" disabled={props.pristine}>
            submit
          </button>
        </>
      )}
    </FormContext>
  );
};

FormContext props

onSubmit (required), function which will be get final object after success submit event
validate, function for validate form
initialValues, object for set initial values
resetAfterSubmit, boolean, automatically reset form after submit event (default false)
debug, boolean, debug mode for form state
rest of props will be set to form tag

useField props

fieldName (required), unique field name
options object, you can pass type and value for input

Keywords

react hooks typescript form context