Skip to content
A form library that uses JSON schema and works with Redux. Originally a part of the TakeShape React web client.
JavaScript TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
src
.babelrc.js
.eslintrc.js
.gitignore
.prettierrc.js
LICENSE
README.md
demo.png
index.js
logo.png
package.json
prettierrc.js
setup-tests.js
takeshape.png
tsconfig.json
yarn.lock

README.md

ShapeForm

ShapeForm Logo

👋 Welcome

Thanks for checking out ShapeForm! First announced at the 8/20 Reactadelphia Meetup this code has been freshly ripped from our React App and open sourced to the community. Check out @asprouse's presentation (slides, video) detailing how we decided to build our own form solution. Give ShapeForm a whirl and let us know what you think or open a PR.

Features

  • 💪JSON Schema validation - Easily share the same form validation frontend and backend
  • 💧Nested Object / Array support with Drag and Drop
  • ⚡️Fast - Pure components for fast rendering even with large forms
  • 🗃Redux / Standalone state management - Choose your own adventure
  • 💅Custom widgets - Widgets are simply React components
  • 🚀Form reducers - Useful for async validation, data normalization, the sky is the limit
  • 👯‍♀️Multi-Part Forms - Multiple form components can edit the same form data. Useful for complex layouts or mult-step forms

🚀 Installation

npm install --save shape-form

or

yarn add shape-form

🎓 Documentation

ShapeForm can be used with or without your own redux store.

BYO Redux: Setup your store with the shape-form reducer and saga

// store.js
import {createStore as createReduxStore, applyMiddleware, compose, combineReducers} from 'redux';
import createSagaMiddleware, {END} from 'redux-saga';
import {createFormReducer, formSaga} from 'shape-form';

const sagaMiddleware = createSagaMiddleware();

const enhancer = compose(
  applyMiddleware(sagaMiddleware),
  window.devToolsExtension ? window.devToolsExtension() : f => f
);

const formReducer = combineReducers({
  // ...your reducers
  shapeForm: createFormReducer()
});

export function createStore(initialState) {
  const store = createReduxStore(formReducer, initialState, enhancer);
  sagaMiddleware.run(formSaga);
  store.close = () => store.dispatch(END);
  return store;
}

Build your form using JSON schema

// App.js
import React from 'react';
import {ShapeForm, SubmitButton} from 'shape-form';
import {Provider} from 'react-redux';

import './App.css';

import {createStore} from './store';

const schema = {
  type: "object",
  properties: {
      fullName: {
          title: "Full Name",
          type: "string",
      },
      email: {
          title: "Email",
          type: "string",
          format: "email",
      },
      newsletter: {
          title: "Sign up for our newsletter",
          type: "boolean",
      },
  },
  required: ["fullName", "email"],
};

function App() {
  return (
    <div className="App">
      <Provider store={createStore()}>
        <ShapeForm formName="simple" schema={schema} />
        <SubmitButton formName="simple" />
      </Provider>
    </div>
  );
}

export default App;

Use with the included provider

// App.js
import React from 'react';
import {ShapeFormProvider, ShapeForm, SubmitButton} from 'shape-form';

import './App.css';

const schema = {
  type: "object",
  properties: {
      fullName: {
          title: "Full Name",
          type: "string",
      },
      email: {
          title: "Email",
          type: "string",
          format: "email",
      },
      newsletter: {
          title: "Sign up for our newsletter",
          type: "boolean",
      },
  },
  required: ["fullName", "email"],
};

function App() {
  return (
    <div className="App">
      <h1>ShapeForm</h1>
      <ShapeFormProvider>
        <ShapeForm formName="simple" schema={schema} />
        <br />
        <SubmitButton formName="simple" />
      </ShapeFormProvider>
    </div>
  );
}

export default App;

🛣️ Roadmap

  • ES6 -> TypeScript
  • Move Material UI dependency into it's own widget package
  • Switch from Immutable.js to immer
  • Upgrade React DnD
  • Convert Redux Saga to a standalone middleware
  • Better support non-Redux users
  • Explore BYO JSON Schema validation
  • Custom field serialization/deserialization

TakeShape

Made With Love by TakeShape

You can’t perform that action at this time.