React nested form
npm install nested-form_"100% bad....never use nested forms"_ - Harry Joy, stackoverflow.com May 11 '11 at 4:34
_"A kitten dies every time you use nested forms"_ - Ibu, stackoverflow.com May 11 '11 at 5:12
Yes, that's how
``html`
html component work. This is why I think we need a new forms standard for react library.
`html`
Welcome
`sh`
$ npm add nested-form
Library created to enable nested forms inside of your project. Every component is 100% Modular composed of replacable, extendable Components of form. You can replace or extend every component with your style or your new react component. You can write validate functions for every field, form and nested form. You can use validation on edit.
`jsx
import * as React from 'react'
import { Form } from 'nested-form'
const YourComponent = () => (
)
}}
/>
Wrapper
It is also possible to replace form field Wrapper that wraps every field
jsx
import * as React from 'react'
import { Form } from 'nested-form'const YourComponent = () => (
I am a form
{
name: 'important',
fieldType: 'string',
content: {
placeholder:'Important...',
},
required: true,
Component
}
]}
AlternativeWrapper={({children,field,error})=> (
{field.content.placeholder || field.name}
{children}
{error && {error}}
)}
validate={e => {
// This will only fire when 1 field is filled with 'password'
fetch(https://send-data-somewhere.com/?data=${JSON.stringify(e)})
}}
/>
)
`Component Replace
jsx
import * as React from 'react';
import { Form, Input, FieldDefinition } from 'nested-form';export const CustomInput: typeof Input = (props: FieldDefinition<'string'>) => (
value={props.value}
onChange={(e) => {
props.onChange(e.target.value);
}}
style={{
padding:20
}}
/>
);
const YourComponent = () => (
I am a form
{
name: 'important',
fieldType: 'string',
content: {
placeholder:'Important...',
},
required: true,
Component: CustomInput
}
]}
validate={e => {
// This will only fire when 1 field is filled with 'password'
fetch(https://send-data-somewhere.com/?data=${JSON.stringify(e)})
}}
/>
)
`Submit button
jsx
import * as React from 'react';
import { Form, Input, FieldDefinition, SubmitComponent } from 'nested-form';
export const CustomSubmit: typeof SubmitComponent = ({ submitText, onClick }) => (
{submitText}
);
const YourComponent = () => (
I am a form
{
name: 'important',
fieldType: 'string',
content: {
placeholder:'Important...',
},
required: true,
}
]}
Submit={CustomSubmit}
validate={e => {
// This will only fire when 1 field is filled with 'password'
fetch(https://send-data-somewhere.com/?data=${JSON.stringify(e)})
}}
/>
)
`Component Styling
(Typestyle)[https://github.com/typestyle/typestyle] is a great styling library for React and typescript and was used to write this lib. You have to use it if you want to extend styles of components. If you want to keep, overwrite or replace them, you are fine with any css library.
$3
jsx
import * as React from 'react';
import { Form, Input, FieldDefinition, SubmitComponent,styles } from 'nested-form';
import { style } from "typestyle";export const BigInput: typeof styles.Input = {
Input: style({
padding:30,
fontSize:20
})
}
const YourComponent = () => (
I am a form
{
name: 'important',
fieldType: 'string',
content: {
placeholder:'Important...',
styles:BigInput
},
required: true,
}
]}
Submit={CustomSubmit}
validate={e => {
// This will only fire when 1 field is filled with 'password'
fetch(https://send-data-somewhere.com/?data=${JSON.stringify(e)})
}}
/>
)
`$3
jsx
import * as React from 'react';
import { Form, Input, FieldDefinition, SubmitComponent,styles } from 'nested-form';
import { style, classes } from "typestyle";export const RedAutoSuggest: typeof styles.Autosuggest = {
...styles.Autosuggest,
datalistSuggest: classes(
styles.Autosuggest.datalistSuggest,
style({
background: 'red'
})
)
};
const myList = ['Cat', 'Caturday', 'KeyboardCat', 'Dog', 'Crocodile', 'Doge']
class YourComponent extends React.Component<{},{
list: string[]
}> {
state={
list:[]
}
render(){
return (
I am a form
{
fieldType: 'autosuggest',
name:'suggestions',
content:{
list:this.state.list,
load:(e) => {
// It receives user input and match suggestions from list
this.setState({
list: myList.filter( element => element.match(e) )
})
},
styles: RedAutoSuggest
}
}
]}
Submit={CustomSubmit}
validate={e => {
// This will only fire when 1 field is filled with 'password'
fetch(https://send-data-somewhere.com/?data=${JSON.stringify(e)})
}}
/>
)
}
}
``This library is written in typescript so everybody will be 100% autocompleted.