fyndiq-component-input

A set of Input components for Fyndiq

Installation

The component can be installed through NPM:

npm i -S fyndiq-component-input

<Input />

Demo

This component is just a wrapper around the <input /> DOM element. It provides some default styling as well as a debouncing feature out of the box.

Usage

import React from 'react'
import Input from 'fyndiq-component-input'

// Normal usage
<Input onChange={value => console.log(value)} />

// Pass some regular <input /> props
<Input
  placeholder="My placeholder"
  type="number"
  value={this.state.myInputValue}
/>

// Use the built-in debouncer
// 500ms of debounce, by default
<Input debouncedOnChange={value => console.log(value)} />

// Show a textarea
<Input component={<textarea />} />

API

The component Input has the following customizable props:

| Name | Type | Description | Default value | |---|---|---|---| | className | String | classname to pass to the root element | '' | | onChange | Function | Callback called everytime the input changes | () => {} | | component | React element | Component to render | <input /> | | disabled | Boolean | Disables the input | false | | debouncedOnChange | Function | Debounced onChange handler | null | | debounceWait | Number | Timeout until which the debounced handler is called, in ms | 500 | | inputRef | Function | Accesses the ref of the input element. Allows to do advanced things like calling .blur() or .focus() | null |

Any other prop will be passed directly to the underlying <input /> element (value, defaultValue, placeholder, onFocus, onBlur...)

<Presets />

Demo

The Presets component allows the user to choose among some default values.

Usage

import React from 'react'
import { Presets } from 'fyndiq-component-input'

// Normal usage
<Presets
  onChange={value => console.log(value)}
  presets={['Value 1', 'Value 2', 'Value 3']}
/>

API

The component Presets has the following customizable props:

| Name | Type | Description | Default value | |---|---|---|---| | input | Input Element | Allows to customize the underlying Input element (placeholder, ...). | <Input /> | | value | String | Sets the current value of the input | '' | | presets | Array of string | Available presets | [] | | onChange | Function | onChange handler | () => {} |

<InvisibleInput />

Demo

This input has no styles applied to it and looks invisible until hovered and focused. Works great with data forms where the data is not supposed to be changed except in some edge-cases.

Usage

import React from 'react'
import { InvisibleInput } from 'fyndiq-component-input'

// Normal usage
<InvisibleInput
  value={currentValue}
  onChange={newValue => console.log(newValue)}
/>

API

The component InvisibleInput has the following customizable props:

| Name | Type | Description | Default value | |---|---|---|---| | className | String | classname to pass to the root element | '' | | onChange | Function | onChange handler | () => {} | | value | String | Sets the current value of the input | '' |

<SearchInput />

Demo

Provides a search-looking input. Bundled with a debouncer

Usage

import React from 'react'
import Input, { SearchInput } from 'fyndiq-component-input'

// Normal usage
<SearchInput onChange={newValue => console.log(newValue)} />

// Collapsible (works great in webpage headers)
<SearchInput collapsible/>

// Customize the Input element
<SearchInput
  input={<Input placeholder="Search the universe" />}
/>

// Use the Input debouncer
<SearchInput debouncedOnChange={value => console.log(value)} />

API

The component SearchInput has the following customizable props:

| Name | Type | Description | Default value | |---|---|---|---| | className | String | classname to pass to the root element | '' | | value | String | Sets the current value of the input | '' | | input | Input Element | Customize the default input element | <Input placeholder="Search" type="search" /> | | size | m or s | Customize the width of the search input | m | | collapsible | Boolean | Adds a collapsible behavior to the input field | false | | emptyAfterSearch | Boolean | If true, the search field is emptied after a search | false | | onSearch | Function | Handler called when the user presses "enter" | () => {} | | debouncedOnChange | Function | Debounced onChange handler | null |