react-hook-form

100%

react-hook-form

✓ Published0🌍 Public

Last edited May 11, 2021

Created on May 11, 2021

This example demonstrates a React form built with react-hook-form, showing how to programmatically reset form state and values. The form uses the `useForm` hook, and a button triggers the `reset` method to set the first name field to "bill" while configuring options like `keepErrors` and `keepDirty` to preserve specific state aspects. The code also references fetching initial values from an external `formValues.json` API, and inputs are registered using the `register` function with validation rules.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

exploring redux form

This example demonstrates a basic React form built with `redux-form`, showing how form state is managed through Redux. The code defines a `SimpleForm` component that uses the `Field` component to bind text inputs for name and email, while the `reduxForm` HOC wraps the component with form configuration. A container component handles the submitted JSON data via a callback. The example highlights the `formReducer` integration in the root reducer, illustrating the library’s core pattern of connecting form fields to Redux state and submitting values as structured JSON.

CCKschneid

67% match

Loading thumbnail…

redux-form example - http://insin.github.io/redux-form-example/

This example demonstrates a travel-add form built with React and redux-form, styled using React-Bootstrap. It validates user input—start and end dates, origin, destination, hotel, and car access—with client-side rules like date range checks, and includes a fake submit flow that displays the submitted data as formatted JSON. The visualization highlights redux-form's declarative field binding, validation, and state management through a multi-field form, with a loading state simulated during submission.

AAbhay-Joshi-Git

61% match

Loading thumbnail…

React Starter

This example demonstrates a simple password visibility toggle in a React form. It shows how a checkbox toggles an input field between “password” and “text” types using the `useState` hook and the component-level `showPwd` state. The React 16.13.1 UMD builds are loaded from unpkg, with the app rendered via `ReactDOM.render` into a root div, and the toggle logic handled by the checkbox’s `onClick` event calling `setShowPwd`.

Vvvs1680

61% match

Loading thumbnail…

React State Hook example

This example demonstrates a minimal React component that uses the `useState` hook from React 17 to track and display a numeric click counter. It renders a button and a paragraph showing how many times the button has been clicked, with each click updating the state and re-rendering the component. Built with ReactDOM rendering into a root div, the visualization uses `d3.v7` for potential data manipulation but does not directly call any d3 functions. The code shows a simple state-driven interaction rather than a graphical chart.

MMichael

58% match

Loading thumbnail…

Login & Registration Form

This example presents an interactive login and registration form built with HTML and CSS, featuring a toggle between two views. The interface uses a hidden checkbox (`#check`) to switch between the login and signup forms, with CSS transitions on the submit buttons for hover feedback. The design is styled with the Poppins font from Google Fonts, and the form inputs are purely presentational, with no backend or validation logic. The implementation relies on vanilla JavaScript only for the checkbox interaction, while the visual styling and layout are handled entirely through the included stylesheet.

SSriyaI

57% match

Loading thumbnail…

React Starter

This example demonstrates a basic React application with a pet-selection dropdown menu. It uses React 16.9.0 and ReactDOM to render a static form interface with no interactive behavior beyond native HTML select controls. The code imports React and ReactDOM, defines a functional App component containing a `<label>` and `<select>` element, and mounts it to the root DOM node. The page has a gray background with hidden overflow, though no data visualization or charting library is employed.

AAmir

56% match

Loading thumbnail…

React App

This example displays a minimal React interface with a text input, a submit button, and a copyright footer. It uses React state via `useState` to manage an input value and an array of submitted items, updating the list on button click. The code imports danfojs (as `dfd`) and Material-UI components, including `Typography`, `Link`, and `Container`, though the layout renders a static `Box` with text and a Material-UI footer. The app mounts through `ReactDOM.render` in `index.js`, referencing bundled scripts from React, ReactDOM, danfojs, and Material-UI.

Kkennethkamhw

56% match

Loading thumbnail…

React Starter 101

This example demonstrates a minimal React application that renders a greeting message and a button, where clicking the button updates the displayed text from "Hage" to "Hige" using React’s `useState` hook. It uses React and ReactDOM from unpkg CDN, and the app is mounted into a `#root` div. The code includes a CSS class for large, centered text and shows basic event handling with an inline `onClick` callback.

DDa1Fu

55% match