react-input-field

React Input Field

Usage no npm install needed!

<script type="module">
  import reactInputField from 'https://cdn.skypack.dev/react-input-field';
</script>

README

react-input-field

A carefully crafted input field for React

See demo at http://zippyui.com/react-input-field/

Features

  • support for clear tool
  • validation, emptyness & associated styles
  • custom styling & events

Example


var Field = require('react-input-field')

var VALUE = 'initial value'

var App = React.createClass({

    // ********
    // NOTE: the first argument is the new value, NOT the event
    // ********
    handleChange: function(value){
        VALUE = value
        this.setState({})
    },

    render: function(){

        function validate(value){
            return value !== ''
        }

        return <Field onChange={this.handleChange} validate={validate} />
    }
})

React.render(<App />, document.body)

NOTE

Unlike normal <input> fields (React.DOM.input), react-input-field calls the onChange handler with the input value being the first arg!

function onChange(value, fieldProps, event){
  console.log(value)
}

<Field onChange={onChange} />

Properties

  • onChange(value: String, props: Object, event: Event) - a function to be called when the input value changes
  • placeholder: String - a placeholder for the input
  • readOnly: Boolean - the value for the readonly attribute for the input field
  • autoFocus: Boolean - the value of the autoFocus attribute for the input
  • clearTool: Boolean/String/ReactElement - defaults to true. Whether to show a clear tool or not when field value is not empty. If the boolean true, ✖ will be rendered as a clear tool, otherwise, the given value will be used.
  • validate: Function - if given, it will be called with the value of the field. If it returns false, the field will have a css class that marks it as invalid (defaults to props.invalidClassName='z-invalid')
  • clearToolStyle: Object - a style for the clear tool
  • clearToolColor: String - a color for the clear tool
  • clearToolOverColor: String - a color for the clear tool, when hovered
  • onClearToolClick: Function(value: String, props: Object, event: Event)
  • emptyValue: String/Function
  • isEmpty: Function
  • onValidityChange: Function(valid: boolean, value, props) - function called when the validity changes
  • toolsPosition: String - defaults to 'right'. Can also be 'left'
  • invalidStyle: Object - style to be applied when the field is invalid
  • name: String - the value of the name attribute for the field
  • onFocus: Function(event)
  • onBlur: Function(event)
  • onKeyUp: Function(event) ... etc and all onKeyXXX events

Look & feel

Styling with className

  • className - a class name to be applied to the component
  • emptyClassName - a class name to be applied to the component, when the value is empty (as determined by isEmpty prop - default implementation is value == null)
  • invalidClassName - a class name to be applied to the component when it has an invalid value (as determined by the validate function prop)

Styling with style object

  • style - styles to be applied to the component
  • emptyStyle - styles to be applied to the component when the value is empty
  • invalidStyle - styles to be applied to the component when the value is invalid (as determined by the validate function prop)
  • focusedStyle - styles to be applied to the component when it is focused

Validation

In order to perform validation, simply provide a validate function.

Example:


function validate(value, props){
  return value === ""
}

<Field validate={validate} defaultValue="test" />

When validate returns false, invalidClassName and invalidStyle are applied.

Input props

Configuring the <input /> directly can be done using the inputProps prop (because style, emptyStyle, emptyClassName, etc... are applied to the wrapping div, not the input itself)

  • inputProps

Example

<Field inputProps={{type: 'tel'}} />

But most of the time you wont need to use inputProps directly.

Example - no need to specify the onFocus callback on inputProps, since it is called due to event delegation.

function onFocus(event){
    //called on input focus
}

<Field onFocus={onFocus} />
  • inputStyle
<Field inputStyle={{color: 'blue'}} />
  • inputInvalidStyle
  • inputEmptyStyle

Contributing

Use Github issues for feature requests and bug reports.

We actively welcome pull requests.

For setting up & starting the project locally, use:

$ git clone https://github.com/zippyui/react-input-field
$ cd react-input-field
$ npm install
$ npm run dev

Now navigate to localhost:9090

Before building a new version, make sure you run

$ npm run build

which compiles the src folder (which contains jsx files) into the lib folder (only valid EcmaScript 5 files).

License

MIT