juanform v2.3.4

JuanForm

This is a library of React 16 pre-built form components. All components are functional components using hooks.

Usage

The main component is the Form component. It will save the current state of the form. It uses the "name" prop of the components inside to save each value. If no "name" prop is given, it will try to use the "id" prop instead. Every form component must have either an id or a name.

import React from 'react';
import { Button , Form , Input } from 'juanform';

function mySubmitFunction(state){
  console.log(state); //{ someInput: ... }
}

class MyForm extends React.Component {
  render(){
    return(
      <Form onSubmit={mySubmitFunction}>
        <Input name="someInput"/>
        <Button submit>Submit</Button>
      </Form>
    )
  }
}

The onSubmit prop of Form, receives a callback and the callback will receive the state as parameter. If a valid component inside the form hasn't changed, it will not appear inside the state even if it has a "name" prop. Valid form components are Button, Input, ComboBox, CheckBox and Field. All other components will be ignored but will still be rendered.

Custom Styled Components

All components have an "as" prop to pass a styled-component to replace the default component. The passed component should match the default component's tag though this is not enforced in any way. As an utility, the Styled module can be used to add custom styles without having to explicitly know which tag belongs to each component. The use of the "as" prop will completely erase the default styles (which as of this version are basically none) so if this behavior is not desired, the Styled module includes the default styles for each comnponent as to be able to take full advantage of styled-components extension capabilities. Form only checks for immediate children. Meaning that if you need to wrap the component inside a different component to give a particular style, you should use the Field component. The Field component is just a wrapper for this particular case.

import React from 'react';
import styled from 'styled-components'
import { Button , Field , Form , Input , Label , Styled } from 'juanform';

function mySubmitFunction(state){
  console.log(state); //{ someInput: ... }
}

const CoolField = Styled.Field`
   ...custom style...
`

const CoolLabel = styled(Styled.Defaults.Label)`
   ...custom extended style...
`

class MyForm extends React.Component {
  render(){
    return(
      <Form onSubmit={mySubmitFunction}>
        <Field as={CoolField}>
          <Label as={CoolLabel}>{"I'm a label"}</Label>
          <Input name="someInput"/>
        </Field>
        <Button submit>Submit</Button>
      </Form>
    )
  }
}

Advanced: Changing the Default behavior of the Form component

By default, all that the Form component does is iterate over its children, checking the "formElement" static attirbute of their classes to see how to bind the element to its state. The only condition is that the Form expects this components to return their information (id or name at least) when the proper event occurs. It will override the "onClick" and "onChange" props of every child component given that the formElement is one of the following strings: Button, Input, CheckBox, ComboBox, Field or Label (Field is a special case where the transform prop is added. Nothing is changed of Label as of yet). You can create valid Form components using the Utilities provided in the Utils module. The easiest way to do is without too much code is by returning a pre-built Form component inside your custom component like this:

import React from 'react'
import { Form , Input , Label , Utils } from 'juanform'
const { createInput } = Utils;

const CustomInput = createInput((props) => <Input {...props}/>)

const MyForm = () => {
  return(
    <Form>
      <Label>My Custom Input</Label>
      <CustomInput/>
    </Form>
  )
}

The utility functions don't do much. They only define a property inside the component prototype. There is also a way to change how the Form component transforms its children. Through the createCustomForm utility method. It receives a function and calls it with a child and must return the transformed child. This does not override the Form's default behavior. Only extends it. A simpel example:

import React from 'react'
import { Form , Utils } from 'juanform'
const { createCustomForm } = Utils;

const customTransformation = (child,form) => {
  if( child.formElement === "custom" ){
    child.transformed = true;
  }
  return child
}

const MyForm = createCustomForm(customTransformation);

Form

Basic component of juanform. Saves the values of valid form components inside its state. Valid form components are Button, Input, ComboBox and CheckBox. The Field component is also valid but it is only a wrapper to add style.

Button

Input

ComboBox

CheckBox