easy-ctx-form

Setup

npm install hook-easy-form --save

Usage

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>
  );
};

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>
  );
};

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>
  );
};

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: '[email protected]',
  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>
  );
};

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

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

useField props

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