@henrypap/muiform

MuiForm

How it works

It relies heavily on Context to keep the components up to date. This can cause some re-renders unless you take care of that (more about that in "Create-custom-field section").

How to use

You can either use it as it is, or extend and make complex Fields by the HOC (maybe a hook could come later) Start by importing the Form, you can also import the Fields you want, for now only Input and Select is supported. Include a submit button as well (wrap in div unless you want it streched).

Basic usages

See example below

import Form, { Input, Select } from "muiform";
import MenuItem form "@material-ui/core/MenuItem";
import Button form "@material-ui/core/Button";

export default () => { // form-page

  function submit (values) {
    console.log('yay', values); // { a: "", b: "" }
  }

  return (
    <Form onSubmit={submit}>
      <Input name="a">
      <Select name="b">
        <MenuItem value="b1">B1</MenuItem>
        <MenuItem value="b2">B2</MenuItem>
      </Select>

      <div>
        <Button type="submit">Submit</Button>
      </div>
    </Form>
  );
}

And thats pretty much it

Create custom Field

To create a new custom field you need to wrap it with the HOC "withForm", I like to then wrap it with React.memo and set a equal function to skip unecessary re-renders (there is a isEqual function provided - more about it later).

The props you give to your custom-field will live inside the "prop" of the "props" (sounds more tricky then it is).

withForm takes 2 argument,

1. component
2. defaultValue // defaults to null (global level defaultValue)

import { withForm, isEqual } from "muiform";

// material-ui imports
import FormHelperText from "@material-ui/core/FormHelperText";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";


// has 2 input fields
const CustomField = withForm(
  // note props (these are your props)
  React.memo(({ value, error, errorMessage, setValue, props }) => {
    const { label, ...rest } = props;

    // will have default value
    const [customValue, setCustomValue] = React.useState(value);

    function handleChange (e) {
      const { name, value } = e.target;
      const newValue = { ...customValue, [name]: value };

      setCustomValue(newValue);

      if (newValue.foo && newValue.bar) {
        setValue(newValue); // here we actually set the form value
      }
    }

    return (
      <FormControl
        {...rest}
        error={error}
        helperText={errorMessage}
      >
        {label && <InputLabel htmlFor={props.name}>{label}</InputLabel>}
        <input type="text" name="foo" value={customValue.foo} onChange={handleChange} />
        <input type="text" name="foo" value={customValue.bar} onChange={handleChange} />
        {Boolean(errorMessage) && (
          <FormHelperText>{errorMessage}</FormHelperText>
        )}
      </FormControl>
    );
  }, isEqual) // not the equal method here
, { foo: 'hello', bar: 'world' });

export default CustomField;

Form props

Form props (all other props are passed to html form) | name | value | | onSubmit | function | | onValid | function | | onInvalid | function |

Field Props

The props that we can give the field are the following (and custom props ofc..)

name	value	description
value	any
hidden	bool
required	bool
validation	function or RegExp
errorMessage	string or ReactNode
defaultValue	string or ReactNode or function	overrides the defaultvalue that can be passed to component (when created)

The props recieved when using HOC

name	value	description
value	any	our value
values	object	we can reference others value thought this object
setValue	function(value, name)	to set fields value (we can also set another's value if name is provided)
error	bool
errors	object	same as values but with errors
setError	function(value, name)	works the same as setValue
errorMessage	string or ReactNode	this is null if no error && isTouched
isTouched	bool
required	bool
validation	function or RegExp	in case you want it 🤷
defaultValue	any	the default value provided as a second argument for withForm

isEqual

the isEqual checks if isTouched, error has changed first if not then it checks if value is the same as before (since value could be an array, object or plain) it does shallow checking for the first two

If you have a complex Field that is referencing another field, best would be to make a new equal funciton in order to receive this change.