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.

| Props | Type | Default Value | Description | | ----------- | -------- | :-----------: | --------------- | | onSubmit | function | undefined | It is a callback that receives a state upon submission| | id | string | undefined | id of the html form tag |

Button

| Props | Type | Default Value | Description | | ----------- | -------- | :-----------: | --------------- | | submit | boolean | false | Decides whether this button causes a submit to happen | | onClick | function | undefined | Callback that receives the event and all button props. If submit is true, the Form component will handle this event and override the value of onClick. | | label | any | props.children | Text to be displayed inside button | | id | string | undefined | id of the html button tag |

Input

| Props | Type | Default Value | Description | | ----------- | -------- | :-----------: | --------------- | | name | string | undefined | prop used by form to save this component's value | | type | string | "text" | Type of html input. It cannot be "radio" or "checkbox". For these cases use their respective components | | placeholder | string | undefined | Placeholder for input | | onChange | function | undefined | Callback that receives the event and the props of the component. If inside a Form, this prop will be overridden. | | id | string | undefined | id of html input tag |

ComboBox

| Props | Type | Default Value | Description | | ----------- | -------- | :-----------: | --------------- | | options | Array | undefined | Array that contains options to display on the ComboBox. Each option must have a "value" and "label" property. The value is the stored value and label is the displayed text. | | name | string | undefined | prop used by form to save this component's value | | onChange | function | undefined | Callback that receives the event and the props of the component. If inside a Form, this prop will be overridden. | | id | string | undefined | id of the html select tag |

CheckBox

| Props | Type | Default Value | Description | | ----------- | -------- | :-----------: | --------------- | | checked | boolean | false | Starting value of the checkbox | | name | string | undefined | prop used by form to save this component's value | | onChange | function | undefined | Callback that receives the event and the props of the component. If inside a Form, this prop will be overridden. | | id | string | undefined | id of the html input tag |