Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/takeshape/shape-form
A form library that uses JSON schema and works with Redux. Originally a part of the TakeShape React web client.
https://github.com/takeshape/shape-form
Last synced: 1 day ago
JSON representation
A form library that uses JSON schema and works with Redux. Originally a part of the TakeShape React web client.
- Host: GitHub
- URL: https://github.com/takeshape/shape-form
- Owner: takeshape
- License: mit
- Created: 2019-07-31T15:15:58.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-26T12:26:57.000Z (almost 2 years ago)
- Last Synced: 2024-11-04T09:38:27.611Z (10 days ago)
- Language: JavaScript
- Homepage: https://www.takeshape.io/
- Size: 2.11 MB
- Stars: 302
- Watchers: 11
- Forks: 6
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ShapeForm
## 👋 Welcome
Thanks for checking out ShapeForm! First announced at the [8/20 Reactadelphia Meetup](https://www.meetup.com/Reactadelphia/events/263614474/) this code has been freshly ripped from our [React App](https://app.takeshape.io) and open sourced to the community. Check out [@asprouse](https://github.com/asprouse)'s presentation ([slides](https://shape-form-talk.netlify.com), [video](https://www.youtube.com/watch?v=iplY8Le1zK0&list=PLKZl1WiDIytFnHqZPgIFNVszTu71kngja)) 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
```es6
// 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
```es6
// 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 (
);
}
export default App;
```
### Use with the included provider
```es6
// 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 (
ShapeForm
);
}
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
---
Made With Love by TakeShape