1.2.4 • Published 9 years ago

react-input-field v1.2.4

Weekly downloads
63
License
MIT
Repository
github
Last release
9 years ago

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

1.2.4

9 years ago

1.2.3

10 years ago

1.2.2

10 years ago

1.2.1

10 years ago

1.2.0

10 years ago

1.1.6

10 years ago

1.1.5

10 years ago

1.1.4

10 years ago

1.1.3

10 years ago

1.1.2

10 years ago

1.0.0

10 years ago

0.1.0

10 years ago