CONTRIBUTING.md

Contributing to React Hook Form

As the creators and maintainers of this project, we want to ensure that react-hook-form lives and continues to grow and evolve. We would like to encourage everyone to help and support this library by contributing.

Code contributions

Here is a quick guide to doing code contributions to the library.

1. Fork and clone the repo to your local machine git clone https://github.com/YOUR_GITHUB_USERNAME/react-hook-form.git

2. Create a new branch from master with a meaningful name for a new feature or an issue you want to work on: git checkout -b your-meaningful-branch-name

3. Install packages by running:

   yarn

4. If you've added a code that should be tested, ensure the test suite still passes.

   yarn test && yarn tsd

5. Try to write some unit tests to cover as much of your code as possible.

6. Ensure your code lints without errors.

   yarn lint

7. Ensure the automation suite passes by running two following commands in parallel:

   yarn start:app yarn cypress

8. Ensure build passes.

   yarn build

9. Ensure exports are documented. (requires build)

   yarn api-extractor

10. Push your branch: git push -u origin your-meaningful-branch-name

11. Submit a pull request to the upstream react-hook-form repository.

12. Choose a descriptive title and describe your changes briefly.

Coding style

Please follow the coding style of the project. React Hook Form uses eslint and prettier. If possible, enable their respective plugins in your editor to get real-time feedback. The linting can be run manually with the following command: yarn lint:fix and yarn prettier:fix

Visual Debugging Jest

Use jest-preview

You can use Jest Preview to debug the Jest tests visually.

1. Put debug() to wherever you want to preview the UI of your Jest tests

import { debug } from 'jest-preview';

it('should render correctly', () => {
  render(<Component />);
  fireEvent.click(screen.getByRole('button');

+ debug();
});

2. Open Jest Preview Dashboard

   yarn jest-preview

3. Run the tests

   yarn test:watch

The browser will reloads automatically when debug() is executed.

Automatic Mode is also enabled, it will preview the UI of a failed test on the browser automatically without explicitly adding debug().

Write a new test

To write a new test efficiently, add debug() at the end of it's callback block. Whenever you hit Save, the corresponding UI updated in a browser instantly.

You can remove debug() after you have finished writing the tests.

import { debug } from 'jest-preview';

it('should render correctly', () => {
  // Write your tests here
  // Whenever you hit Save, the UI updated in a browser instantly

  debug(); // <-- add this line at the end of `it` block
});

Documentation

In case you want to change the README.md, please instead modify the docs/Template.md file, as the README is generated from it upon committing.

License

By contributing your code to the react-hook-form GitHub repository, you agree to license your contribution under the MIT license.

Contributors

Thank you to all the people who have already contributed to React Hook Form!