@rexlabs-spicerhaart/text-input NPM

TextInput - Heidi Component

TextInput forms the basis of almost all text-based inputs. It is designed to be extremely flexible and extensible, using a pattern I'm calling "adaptive composition".

The core input itself is very simple and has no internal logic. All behaviour is composed into the input via Higher Order Components (HoCs), which themselves adapt to the props passed at the callsite using recompose's branch. Each HoC strongly adheres to the Single Responsibility Principle, keeping all behaviour encapsulated and the core input itself ignorant of these concerns. This enables a new API: uncontrolled, which when applied, causes certain HoCs to switch to stateful versions which manage their own handlers and state, all from a single export.

TextArea is provided as a named export. Additional preset inputs (email, password, search) should be defined in your application using recompose's withProps HoC (e.g: export const EmailInput = withProps({type: EMAIL})(TextInput)). This affords us the best balance between flexibility and ease-of-use.

Custom API

Prop	Description
type	Sets input type and mobile keyboard
name	Used as `id` and `name`
prefix	Arbitrary content before the input
suffix	Arbitrary content after the input
onEnter	Called when uses presses 'Enter' within the input
onTab	Called when uses presses 'Tab' within the input
onBackspace	Called when uses presses 'Backspace' within the input
setRef	Returns the input DOM node
Container	Component to render around the input
Input	Component to render as the input
containerProps	Props passed to the Container
charLimit	Adds a character limit and displays it below input
showCharLimit	Controls displaying of charLimit
HoCs
uncontrolled	Setting this will trigger stateful/uncontrolled versions of some HoCs
validated
validate	Function to return whether value is valid or not (only for uncontrolled)
dirty	Input has been blurred (valid status will not display until dirty)
valid	Input value is valid
validSuffix	Arbitrary content to display after input when value is valid
errorSuffix	Arbitrary content to display after input when value is invalid
withA11y
isFocused	Input currently has focus
shouldSelectOnFocus	Focusing the input should select all text content
appLayer	Current application UI layer (for modals and such)
layer	Input UI layer - when different to appLayer, sets `tabIndex` to -1
initialized
autoFocus	Focus input on mount
rehydrate	Call `onChange` with input value on mount (for server-side rendered views)
masked
mask	Strategy (function/regex/preset) to modify value in `onChange`
withHint
hint	Text displayed beneath input as context
shouldHideHintWithoutFocus	Hide hint when input is not focused
withInlineErrors
errors	Array of error messages displayed beneath input
withCosmetic
cosmetic	Arbitrary content to display instead of input when input is not focused

Development

Install dependencies

$ yarn

Available Commands

$ yarn start              # starts storybook, for visually testing text-input
$ yarn test               # runs all units tests
$ yarn test:watch         # runs unit tests when files change
$ yarn build              # bundles the package for production

Ongoing development and maintenance should follow the following guidelines:

Modifications to text-input should be extremely rare and carefully considered
Cross-cutting concerns between HoCs should be kept to an absolute minimum (currently only isFocused crosses HoC boundaries), and always cleaned up (omitted from props passed to text-input)
Setting the value prop should be considered banned outside of uncontrolled branches (reading from it is ok)
HoCs should export all propTypes required for their API (and these should be merged onto the composed input in index)

Legal

react-component vivid-component

@rexlabs-spicerhaart/styling prop-types

6.0.3

3 years ago