1.15.1 • Published 2 years ago

@squiz/xaccel-assisted-input

Licence

ISC

Version

1.15.1

Deps

Size

80 kB

Vulns

Weekly

Summary Dependency Versions

The AssistedInput component enhances user input by providing suggestions or results based on what the user types. It's meant to be flexible and integrate with various types of content that might need autocomplete functionality, such as search bars or data entry fields.

The component consists of a few subcomponents, including a results container and a label, which allows for complex interaction and presentation of data.

Components properties

Property Name	Property Description	Property Type	IsRequired
`name`	Unique identifier for the input, used in form submissions.	string	[x]
`showClear`	Determines if a clear button should be displayed.	bool
`clearIcon`	Custom icon to be used for the clear button.	node
`preloadValueFromNameParam`	Preloads the input with a value from URL parameters, if available.	bool
`className`	Overwrite ClassName	classNameOverride
`autofocus`	Automatically focus the input upon component mount.	bool
`onChangeValue`	Callback function called with the current input value.	func

For more information about className please visit packages/utility/functions/src/generateClasses.js

Subcomponents and Context

AssistedInputContainer - wraps the AssistedInput and other related components, managing their shared state and interactions. It provides a context for communication between the input field and the results list, handling focus, input changes, and keyboard navigation.
AssistedInputContext - enables the sharing of state and interactions among AssistedInput and its subcomponents. It contains: input value, active descendant, and fetching state.
AssistedInputLabel - optional label component for the AssistedInput, indicating the purpose of the input field.
AssistedInputResultsContainer - a container for the results or suggestions displayed as the user types. It listens to the context for changes in the input field.

Conditional component presentation

The appearance and behavior of the AssistedInput component can be customized through props - for example, setting showClear to true adds a clear button, allowing users to clear their input.

The preloadValueFromNameParam can automatically fill the input based on URL parameters, preloading expected values.

Props Example:

<AssistedInput
  name="search"
  showClear={true}
  clearIcon={<ClearIcon />}
  preloadValueFromNameParam={true}
  className="customClass"
  autofocus={true}
  onChangeValue={(value) => console.log(value)}
/>

Usage

Install the package by running: npm i @squiz/xaccel-assisted-input

import { AssistedInputContainer, AssistedInput, AssistedInputResultsContainer, AssistedInputLabel } from '@squiz/xaccel-assisted-input';

function SomeReactComponent({ id }) {
    return (
        <form>
            <AssistedInputContainer id={id} onSubmit={() => console.log('Submit')}>
                <AssistedInputLabel>Search</AssistedInputLabel>
                <AssistedInput showClear />
                <AssistedInputResultsContainer>
                    Enter something to see results
                </AssistedInputResultsContainer>
            </AssistedInputContainer>
        </form>
    );
}

export default SomeReactComponent;