Skip to content

Manage your forms with magic ✨ πŸ§™πŸ½β€β™‚οΈ

Notifications You must be signed in to change notification settings

GianCastle/useform

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

14 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

useForm βš›οΈβš“οΈ

Manage your forms with magic ✨ πŸ§™πŸ½β€β™‚οΈ

NPM JavaScript Style Guide

Installation πŸ’»

[npm | yarn] [install | add] @gco.c/useform

Examples

Simple Form πŸ“βœ¨

import React from 'react';
import { useForm } from '@gco.c/useform';

const SignUp = ({ classes }) => {
  const { values, useInput, isValid } = useForm({
    username: '',
    email: ''
  });

  const handleSubmit = e => {
    e.preventDefault();
    console.log(values)
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text"
        {...useInput('username', 'isRequired')}
      />

      <input
        className="some-classess"
        {...useInput('email', 'isRequired, isEmail')}
      />

      <button type="submit"
        disabled={!isValid}
        className="more-classes"
      >
        Submit
      </button>
    </form>
  );
};

Form with a state object with nested values ✨

import React from 'react';
import { useForm } from '@gco.c/useform';

const SignUp = ({ classes }) => {
  const { values, useInput, isValid } = useForm({
    user: {
      username: '',
      email: ''
    }
  });

  const handleSubmit = e => {
    e.preventDefault();
    console.log(values);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        {...useInput('user.username', 'isRequired')}
      />

      <input
        className="some-classess"
        {...useInput('user.email', 'isRequired, isEmail')}
      />

      <button
        type="submit"
        disabled={!isValid}
        className="more-classes"
      >
        Submit
      </button>
    </form>
  );
};

Form with checkboxes

import React from 'react';
import { useForm } from '@gco.c/useform';


const SelectYourPlayers = ({ classes }) => {
  const defaultWarriors = {
    warriors: ['Raiden', 'Sub Zero']
  };

  const { values, useCheckboxGroup, isValid } = useForm(defaultWarriors);

  const handleSubmit = e => {
    e.preventDefault();
    console.log(values);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="form-checkbox-group">
          <label>
            Raiden
            <input
              type="checkbox"
              {...useCheckboxGroup('warriors', 'Raiden')}
            />
      </label>
      <div className="form-checkbox-group">
          <label>
            Sub Zero
            <input
              type="checkbox"
              {...useCheckboxGroup('warriors', 'Sub Zero')}
            />
      </label>
      <div className="form-checkbox-group">
        <label>
            Scorpion
            <input
              type="checkbox"
              {...useCheckboxGroup('warriors', 'Scorpion')}
            />
      </label>
      <button
        type="submit"
        disabled={!isValid}
        className="more-classes"
      >
        Submit
      </button>
    </form>
  );
};

License

MIT Β© GianCastle


This hook is created using create-react-hook.

About

Manage your forms with magic ✨ πŸ§™πŸ½β€β™‚οΈ

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published