https://github.com/betagouv/react-final-form-utils

Decorators, validators and string helpers for classic email, password, loading fields in a react final form
https://github.com/betagouv/react-final-form-utils

Last synced: 12 days ago
JSON representation

Decorators, validators and string helpers for classic email, password, loading fields in a react final form

• Host: GitHub
• URL: https://github.com/betagouv/react-final-form-utils
• Owner: betagouv
• License: mit
• Created: 2019-02-06T14:31:20.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T20:48:14.000Z (about 2 years ago)
• Last Synced: 2024-11-16T01:39:55.557Z (28 days ago)
• Language: JavaScript
• Homepage:
• Size: 1.69 MB
• Stars: 6
• Watchers: 9
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-final-form-utils

Decorators, validators and string helpers for classic email, password, loading fields in a react final form

[![CircleCI](https://circleci.com/gh/betagouv/react-final-form-utils/tree/master.svg?style=svg)](https://circleci.com/gh/betagouv/react-final-form-utils/tree/master)

[![npm version](https://img.shields.io/npm/v/react-final-form-utils.svg?style=flat-square)](https://npmjs.org/package/react-final-form-utils)

## Basic Usage

For a typical TextField input:

```javascript

/* eslint

  react/jsx-one-expression-per-line: 0 */

import classnames from 'classnames'

import React from 'react'

import PropTypes from 'prop-types'

import { Field } from 'react-final-form'

import {

  composeValidators,

  config,

  createParseNumberValue,

  createValidateRequiredField

} from 'react-final-form-utils'

import { FieldError } from '../layout'

const validateRequiredField = createValidateRequiredField(config.DEFAULT_REQUIRED_ERROR)

export const TextField = ({

  autoComplete,

  className,

  disabled,

  id,

  label,

  name,

  placeholder,

  readOnly,

  renderInner,

  renderValue,

  required,

  type,

  validate,

}) => {

  const requiredValidate =

    required && typeof required === 'function'

      ? required

      : (required && validateRequiredField) || undefined

  return (

     (

        


          

            {label && (

              

                {label}

                {required && !readOnly && *}

              

            )}

          

          


            


              


                

                {renderInner()}

              

              {renderValue()}

            

            

          

        

      )}

    />

  )

}


TextField.defaultProps = {

  autoComplete: false,

  className: '',

  disabled: false,

  id: null,

  label: '',

  placeholder: 'Please enter a value',

  readOnly: false,

  renderInner: () => null,

  renderValue: () => null,

  required: false,

  type: 'text',

  validate: null,

}

TextField.propTypes = {

  autoComplete: PropTypes.bool,

  className: PropTypes.string,

  disabled: PropTypes.bool,

  id: PropTypes.string,

  label: PropTypes.string,

  name: PropTypes.string.isRequired,

  placeholder: PropTypes.string,

  readOnly: PropTypes.bool,

  renderInner: PropTypes.func,

  renderValue: PropTypes.func,

  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),

  type: PropTypes.string,

  validate: PropTypes.func,

}

export default TextField

```