react-hooks-form-components

Why?

Most components from cosmos-components do not play nicely with React Hook Form so we cannot use them because they were developed, targetting Redux Form.

This is an attempt to create some basic usable form components for react hook form.

Installation

• yarn

    yarn add react-hooks-form-components

• npm

    npm install --save react-hooks-form-components

Run stories

• yarn

	yarn storybook

• npm

	npm run storybook

Version, commit, update repo and publish

• npm

	npm version <patch> | <minor> | <major>

Please make sure that your npmrc is set before attempting this. The above will update the version appropriately (even inside package.json), commit all changes, push changes to repository, build binary then publish binary to jfrog. You might be required to confirm version to proceed.

Force publish on failure (Only once versioning is done but publishing failed)

	npm publish

The above might be needed only when publishing failed for whatever reasons after successful commit and push updates.

Usage

import React from "react";
import { useForm } from "react-hook-form";

//Add the react-hooks-form-components and styles
import { Input } from "react-hooks-form-components";
import "react-hooks-form-components/dist/react-hooks-form-components.css";

//Create a form
const Form = () => {
	const { handleSubmit, ...rhf } = useForm();
	const [start, setStart] = useState < boolean > false;
	const onSubmit = (data: any) => {
		console.log(data);
	};

	const onChange = (old: boolean) => {
		setStart(!old);
	};
	return (
		<form onSubmit={handleSubmit(onSubmit)}>
			<h2>Bio Data </h2>
			{/* 
                Use input with your knowledge of react hook form.
            */}
			<Input
				name="userId"
				type="text"
				defaultValue="it-togo/1211"
				rhf={rhf}
				validations={{ required: "User ID is required" }}
			/>

			<input type="submit" />
		</form>
	);
};

//export the Form
export { Form };

Components

At the moment, we are starting with:

• Text input
• Select
• Switch
• Switch Item
• SwitchGroup
• CheckListItem
• CheckList
• DemoForm

Viewing the Components

Clone this repo and install the packages;

    git clone https://github.com/roadtrippers/react-hooks-form-components.git

    cd react-hooks-form-components

    yarn install or npm install

    yarn storybook or npm run storybook

The above opens the stories to see visuals of the components.