Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rational-kunal/dynamic-form
Create bootstrap flavoured dynamic forms with ease.
https://github.com/rational-kunal/dynamic-form
Last synced: about 16 hours ago
JSON representation
Create bootstrap flavoured dynamic forms with ease.
- Host: GitHub
- URL: https://github.com/rational-kunal/dynamic-form
- Owner: rational-kunal
- Created: 2021-06-06T06:47:09.000Z (over 3 years ago)
- Default Branch: develop
- Last Pushed: 2021-08-03T03:43:47.000Z (over 3 years ago)
- Last Synced: 2024-10-31T10:52:46.587Z (16 days ago)
- Language: JavaScript
- Homepage: https://rational-kunal.github.io/dynamic-form/
- Size: 1.47 MB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# dynamic-form
Stateful forms on the fly.
## Install
```bash
npm i @rational-kunal/dynamic-form
```
## Usage
`DynamicForm.Form` creates a beautiful form for a given schema. Schemas should be passed through `DynamicForm.schema` to parse it before passing it to the component. See the schemas section to see how to render the different types of complex forms.
```js
import DynamicForm from 'dynamic-form'
const App = () => {
const [value, setValue] = useState({})
const schema = DynamicForm.schema({
Name: 'John Doe',
Age: Number
})
return (
setValue(newValue)}
onSubmit={(newValue) => setValue(newValue)}
/>
)
}
```
## `DynamicForm.Form`
The core component that will render a form for a given schema.
| Props | Type | Note |
| -------- | -------- | ------------------------------------------------------------------------------- |
| Schema | Object | Schema object parsed by `DynamicForm.schema` |
| onChange | Function | Function that will be executed with changed value when value in form is changes |
| onSubmit | Function | Function that will be executed with final value when submit button is pressed |
## `DynamicForm.type`
Available form types. This will also control how value will be returned through `onChange` and `onSubmit`.
TODO: Update notes with nature of types.
| Form Types | Note |
| ---------- | ---------------------------------------------- |
| text | String form that will return `String` value |
| number | Number form that will return `Number` value |
| nested | Nested form that will return `Object` value |
| repeatable | Repeatable form that will return `Array` value |
## `DynamicForm.schema`
The function parses minimal schema and converts it into an expanded schema that is understandable by `DynamicForm.Form`. \
For minimal schema, the developer given label will be used as a key to store value for the form. For expanded schema, the developer key will be used as a key to store value for the form. \
Example of schema:
```js
// Minimal schema
const schema = {
Name: 'John Doe'
}
// Convert minimal, expanded or mixed schema to expanded schema
let expandedSchema = DynamicForm.schema(schema)
// expaded schema for given minimal schema will look like this
expandedSchema = {
Name: {
type: 'DynamicFormType.Text',
label: 'Name',
defaultValue: 'John Doe'
}
}
```
See [examples](https://rational-kunal.github.io/dynamic-form) to see schemas is action.
### String schema
```js
// Use this if you just want to create form on the fly.
const stringSchema = {
'': String || ''
}
// Fine tune some of the aspects.
const stringSchema = {
'': {
label: '',
type: DynamicFormType.text,
placeholder: '', // Optional
defaultValue: '' // Optional
}
}
```
### Number schema
```js
// Use this if you just want to create form on the fly.
const numberSchema = {
'': Number || ''
}
// Fine tune some of the aspects.
const stringSchema = {
'': {
label: '',
type: DynamicFormType.number,
placeholder: '', // Optional
defaultValue: '' // Optional
}
}
```
### Nested schema
```js
// Use this if you just want to create form on the fly.
const nestedSchema = {
'': { ... }
}
// Fine tune some of the aspects.
const nestedSchema = {
'': {
label: '',
type: DynamicFormType.nested,
schema: { ... }
}
}
```
### Repeated schema
```js
// Use this if you just want to create form on the fly.
const repeatedSchema = {
'': [{ ... }]
}
// Fine tune some of the aspects.
const repeatedSchema = {
'': {
type: DynamicFormType.repeatable,
schema: { ... }
}
}
```
## License
MIT © [rational-kunal](https://github.com/rational-kunal)