formik-enhancer v1.0.8

formik-enhancer

Cut the boilerplate, keep what matters.

Instalation

yarn add formik-enhancer

For validations, install Yup

yarn add yup

Usage

import formikEnhancer from 'formik-enhancer'

formikEnhancer({ config, values, schema })

❗formik-enhancer sets enableReinitialize to true by default. If you have external things that can change your form values, this will keep it up-to-date.

config: Record<string, any>

values?: Record<string, any>

An object containing new values for the form. If you want to load data from an API or something like that, this is your guy.Values inside this prop will overwrite initialValue from schema fields.

schema: Array<Record<string, any>>

generic props:

native-only props:

select type props:

//renderItem will always receive two props: `option` and `index`
// `option` is one of `items` entry
// `index` is the index of `option` in `items`

// React
const _renderItem = (option, index) => {
  return <option key={index} value={option.value}>{option.label}</option>
}

// React Native
const _renderItem = (option, index) => {
  return <Picker.Item key={index} label={option.label} value={option.value} />
}

Besides this props, you can pass anything you want as a prop. Just be sure to keep track of what you doing.

Every field will receive two extra props: error and touched. This props values are managed by formik-enhancer and you can use it to render validation errors, etc.

Example

// Form schema. Based on this array, formik-enhancer will build your form.
const schema = [
  {
    name: 'user',
    label: 'Choose your username',
    placeholder: 'e.g. JohnDoe',
    initialValue: 'Foo', 
    validation: Yup.string().required('Required field'),
    component: TextField
  },
  {
    type: 'select',
    name: 'favoriteColor',
    label: 'What is your favorite color?',
    placeholder: { label: 'Select...' },
    validation: Yup.string().required('Required field'),
    component: SelectField,
    items: [{ label: 'Red', value: 'red' }],
    renderItem: (option, index) => _renderItem(option, index)
  },
  {
    secure: true, // this prop is valid only in React Native. Check the props tables above.
    name: 'password',
    label: 'Inform your password',
    placeholder: 'Use at least 8 characters',
    validation: Yup.string().min(8, 'Too short!').required('Required field'),
    component: TextField
    blurEvent: _ => console.log('This is my custom blur event!')
  }
]

// Configuration object. For now, have only this 2 props, onSubmit and children.
// Consider it a WIP.
// More details in the config props table.
const config = {
  onSubmit: values => console.log('Submitted form: ', values),
  children: formikProps => (
    <React.Fragment>
        <Button
          title='Reset'
          type='outline'
          onPress={_ => formikProps.resetForm()}
          containerStyle={{ width: '40%', marginTop: 15, marginRight: 7.5 }}
        />
    </React.Fragment>
  )
}

import * as Yup from 'yup'
import { Picker } from 'react-native'
import formikEnhancer from 'formik-enhancer'
// You can use any component you want. 
// In this example, we use React Native Elements.
import { Input, Button } from 'react-native-elements'

export default SomeClass extends React.Component {
  render () {
    return (
      <React.Fragment>
        {formikEnhancer({ schema, config })}
      </React.Fragment>
    )
  }
}

// Fields for our form :)
const TextField = ({ ...props }) => (
  <Input
    {...props}
    errorStyle={{ color: 'red' }}
    errorMessage={props.touched && props.error ? props.error : ''}
  />
)

const SelectField = ({ ...props }) => (
  <React.Fragment>
    <Text>{props.label}</Text>
    <Picker {...props} />
    {props.error &&
      props.touched &&
      <Text style={{ color: 'red' }}>{props.error}</Text>}
  </React.Fragment>
)

For masks, you can pass any function that receives a value as parameter:

interface PhoneInterface {
  (input: string): string
}

const phone: PhoneInterface = (input) => {
  return input
    .replace(/\D/g, '')
    .replace(/(\d{2})(\d)/, '($1) $2')
    .replace(/(\d{4})(\d)/, '$1 $2')
    .replace(/(\d{4}) (\d)(\d{4})/, '$1$2 $3')
    .replace(/( \d{4})\d+?$/, '$1')
}

export default phone

  name: 'phone',
  label: 'What is your phone?',
  mask: phoneMask