@home-app/input.component v0.1.0

Homeless INPUT

Extended input component. Supports additional types:

• mask
• number

How to install

yarn add @home-app/input.component

How to use

Masked input

import React from 'react';
import Input from '@home-app/input.component'

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };
  }

  handleChange = value => {
    this.setState({
      value,
    });
  };

  render() {
    return <Input onChange={this.handleChange} value={this.state.value}  mask="+7 (999) 999-99-99" type="mask" />;
  }
}

Money input

import React from 'react';
import Input from '@home-app/input.component'

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '0',
    };
  }

  handleChange = value => {
    this.setState({
      value,
    });
  };

  render() {
    return <Input onChange={this.handleChange} value={this.state.value} type="money" />;
  }
}

API

common props:

• string: type = type of input;
• string(success|error): status = type of icon;
• function: onChange(value: string, event: Event, additionalParams: object): handler;
• boolean: isLine = type of view (line or outline);
• string: defaultValue = default value

specific props:

Money:

look react-currency-input

Mask:

look react-input-mask