@zenequityui/input v0.9.6

Installation

To install a component run

$ npm install @zenequityui/input --save

Please import CSS styles via

@import '/path__to__node_modules/@zenequityui/input/dist/index.min.css

Usage

Without Label and Without Required:

import { Input } from '@zenequityui/input';

initialState = {
  value: '',
  smallValue: '',
  textAreaValue: '',
};
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <Input
    placeholder="Placeholder"
    value={state.value}
    onChange={(event) => {
      setState({
        value: event.target.value,
      });
    }}
    onEnter={(value) => { alert(`value: ${value}`); }}
  />
  <Input
    isTextarea
    placeholder="TextArea Placeholder"
    value={state.textAreaValue}
    onChange={(event) => {
      setState({
        textAreaValue: event.target.value,
      });
    }}
    onEnter={(textAreaValue) => { alert(`value: ${textAreaValue}`); }}
    htmlAttributes={{
      rows: '5',
      cols: '30',
    }}
  />
</div>

Disabled Inputs

import { Input } from '@zenequityui/input';

initialState = {
  value: '',
};
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <Input
    placeholder="Placeholder"
    value={state.value}
    onChange={(event) => {
      setState({
        value: event.target.value,
      });
    }}
    onEnter={(value) => { alert(`value: ${value}`); }}
    isDisabled
  />
  <Input
    isTextarea
    placeholder="TextArea Placeholder"
    value={state.textAreaValue}
    onChange={(event) => {
      setState({
        textAreaValue: event.target.value,
      });
    }}
    onEnter={(textAreaValue) => { alert(`value: ${textAreaValue}`); }}
    htmlAttributes={{
      rows: '5',
      cols: '30',
    }}
    isDisabled
  />
</div>