react-input-interceptor

React Input component data parse & format.

Usage no npm install needed!

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

README

react-input-interceptor

React Input component data parse and format.

How to use?

Install

> npm install react-input-interceptor

Example(based on antd)

import React, { Component } from 'react';
import { Form, Input } from 'antd';
import InputInterceptor from 'react-input-interceptor'

@Form.create()
class Example extends Component {
  // view => model
  handleParse = (value) => {
    // do something
  }

  // model => view
  handleFormat = (value) => {
    // do something
  }

  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;

    return (
      <div>
        {
          getFieldDecorator('field')(
            <InputInterceptor parse={this.handleParse} format={this.handleFormat}>
              <Input />
            </InputInterceptor>
          )
        }
      </div>
    )
  }
}