https://github.com/pavlyukvadim/react-live-form
Created with a purpose to take control of your dynamic forms by the library
https://github.com/pavlyukvadim/react-live-form
demo ecmascript form-builder javascript jest observable react react-form-builder
Last synced: 2 months ago
JSON representation
Created with a purpose to take control of your dynamic forms by the library
- Host: GitHub
- URL: https://github.com/pavlyukvadim/react-live-form
- Owner: PavlyukVadim
- License: mit
- Created: 2017-09-19T23:53:48.000Z (over 7 years ago)
- Default Branch: source
- Last Pushed: 2022-12-08T17:00:33.000Z (over 2 years ago)
- Last Synced: 2025-03-18T13:09:27.737Z (2 months ago)
- Topics: demo, ecmascript, form-builder, javascript, jest, observable, react, react-form-builder
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-live-form
- Size: 3.8 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-live-form
[](https://travis-ci.org/PavlyukVadim/dynamic-forms) [](https://coveralls.io/github/PavlyukVadim/dynamic-forms?branch=source)
`react-live-form` is a library for building a live forms (forms with dynamic fields) based on [React](https://facebook.github.io/react/).
#### [Demo](https://pavlyukvadim.github.io/react-live-form/) | [Source](https://github.com/PavlyukVadim/dynamic-forms)
## Setup
* Install with `npm` or `yarn`:
```sh
npm i react-live-form
# OR
yarn add react-live-form
```
* Use in your project:
```jsx
import React from 'react';
import LiveForm from 'react-live-form';
const formConfig = {
formName: 'firstForm',
fields: [
{
name: 'a',
fieldType: 'input',
props: {
title: 'field a',
},
state: {
value: {
defaultValue: 5,
},
},
},
{
name: 'b',
fieldType: 'input',
props: {
title: 'field b',
},
},
{
name: 'c',
fieldType: 'input',
props: {
title: 'field c',
},
state: {
value: {
defaultValue: 0,
valueExpr: 'a + b',
},
},
},
{
name: 'd',
fieldType: 'input',
props: {
title: 'field d',
},
state: {
value: {
defaultValue: 0,
valueExpr: 'c * 2',
},
display: {
defaultValue: false,
valueExpr: 'a > 10',
},
disabled: {
defaultValue: false,
valueExpr: 'a > 34',
},
},
},
]
};
const MyComponent = () =>
;
```
## Tips
* Use [demo pages](https://pavlyukvadim.github.io/react-live-form/) to find all available components with examples.
## License
This project is offered under [MIT License](https://github.com/PavlyukVadim/dynamic-forms/blob/master/LICENSE).