Shape Form
Welcome
Thanks for checking out ShapeForm! First announced at the 8/20 Reactadephia Meetup this code has been freshly ripped from our React App and open sourced to the community. Check out @asprouse's presentation on how we decided to build our own solution. Give ShapeForm a whirl and let us know what you think or open a PR.
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.jsimport {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.jsimport 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.jsimport 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