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

100%

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

✓ Published0🌍 Public

Last edited Sep 30, 2015

Created on May 16, 2016

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.

AI-generated description

Example of implementing form components backed by redux-form, extracted from an application which uses react-bootstrap for layout and react-widgets' date picker, where all the forms redux-form is being used to manage happen to have 2 column layouts.

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

To run the example with hot reloading via react-heatpack:

git clone git@gist.github.com:bbf116e8ea10ef38447b.git redux-form-example
cd redux-form-example
npm install
npm start

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

79% match

Loading thumbnail…

Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-)

This example presents a single-file implementation of Redux, stripped of its typical validation and sanity checks. It defines core Redux APIs, including `createStore`, `combineReducers`, `bindActionCreators`, `compose`, and `applyMiddleware`, using helper functions like `mapValues` and `pick`. The code demonstrates a minimal store with `dispatch`, `subscribe`, `getState`, and `replaceReducer` methods, initializing state with an `@@redux/INIT` action. It shows a functional, albeit simplified, version of Redux’s state management pattern, intended for educational purposes rather than production use.

RRestuta

63% match

Loading thumbnail…

Fork of HTML Starter

This example shows a React-based authentication interface with login and signup forms, accompanied by a carousel component. The interface uses Material-UI components such as `TextField`, `Button`, and `Card` within a styled layout, with routing handled by `react-router-dom` and `Routes`. Forms capture user credentials and submit them via axios POST requests to specified endpoints. The visual design features gradient backgrounds, CSS styling, and FontAwesome icons, though no data visualization is present.

SShubham Pathak

62% match

Loading thumbnail…

Gist 4974858be3b0a24bbeed1a8fbbade3be

This example shows a collapsible accordion interface built with React, featuring three panels where the first two contain static placeholder text and the third embeds a user-editable input field. It demonstrates nested interactive components within a Bootstrap-style Accordion using the React framework. The code uses React.createElement and a custom class with getInitialState and handleChange methods to manage the input’s state, updating its value as the user types. The accordion and panel components come from a React library, and the example relies on ReactDOM.render to display the instance.

66ewis

62% match

Loading thumbnail…

react-hook-form

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.

MMuhammad Meigooni

61% match

Loading thumbnail…

Fork of React Test (NW)

This example presents two interactive React components: a counter with increment and decrement buttons, and a form with a to-do list that displays user input. The counter updates a visual number display, while the form shows submitted text and tracks button hover and click states. The code uses React 19's `useState` hook for state management and handles form submission via `FormData`. Styling is applied through an external CSS file, with dynamic color changes for button feedback. The components are rendered together using `ReactDOM.createRoot`.

NNita

61% 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

61% match

Loading thumbnail…

Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-)

This example demonstrates a minimal, single-file implementation of Redux’s core API, including `createStore`, `combineReducers`, `bindActionCreators`, and `applyMiddleware`. It shows how these functions work together to manage state and dispatch actions, with `subscribe` for listener registration and `replaceReducer` for hot-swapping. The code defines the store’s logic directly, using plain JavaScript functions like `mapValues` and `compose` to replicate the original library’s behavior without its validation checks. The listing is a gist by Stroked, intended as a concise educational reference for Redux’s internals.

AAjayyy

61% match