React Enhanced Input

react-enhanced-input is an input box in which you can style or decorate text


Visit the Demo page

To install

``js
yarn add react-enhanced-input
`

or

`js
npm i react-enhanced-input
`

Components

$3

The EnhancedInput component is the package's primary component.

#### Properties
`js
tabIndex?: number;
Sets the tab order.

className?: string;
CSS classname.

style?: React.CSSProperties;
React style properties.

lineHeight?: string;
Line hieght of the input. This may need to be set if using text decorators.

clipInput?: boolean;
Show or hide elements outside the boundsd. If using titles this should be false.

text: string;
Text string to display.

textBlocks: TextBlock[];
Textblocks to be styled or decorated.

DropDownComponent?: React.ElementType;
If you want to use a custom dropdown, set here.

inputDecorator?: JSX.Element | null;
If you want to decorate the input component, set your HTML here.

onChange?: (
text: string,
position: number,
blockId?: string,
blockText?: string,
blockElement?: HTMLSpanElement,
) => void;
onBlockCreated?: (
blockId: string,
blockElement: HTMLSpanElement,
clientOffset: ClientOffset,
) => void;
onClientScrolled?: (clientOffset: ClientOffset) => void;
onCursorPositionChanged?: (
text: string,
position: number,
blockId?: string,
blockText?: string,
blockElement?: HTMLSpanElement,
) => void;
onDropDownItemSelected?: (blockid: string, option: string) => void;
onFocus?: (event: React.FocusEvent) => void;
onBlur?: (event: React.FocusEvent) => void;
onClick?: (event: React.MouseEvent) => void;
onDoubleClick?: (event: React.MouseEvent) => void;
onMouseDown?: (event: React.MouseEvent) => void;
onMouseUp?: (event: React.MouseEvent) => void;
onMouseEnter?: (event: React.MouseEvent) => void;
onMouseLeave?: (event: React.MouseEvent) => void;
onMouseOver?: (event: React.MouseEvent) => void;
onKeyDown?: (event: React.KeyboardEvent) => void;
onKeyUp?: (event: React.KeyboardEvent) => void;
onBlockClick?: (event: EnhancedInputMouseEvent) => void;
onBlockDblClick?: (event: EnhancedInputMouseEvent) => void;
onBlockMouseDown?: (event: EnhancedInputMouseEvent) => void;
onBlockMouseUp?: (event: EnhancedInputMouseEvent) => void;
onBlockMouseEnter?: (event: EnhancedInputMouseEvent) => void;
onBlockMouseLeave?: (event: EnhancedInputMouseEvent) => void;
onBlockMouseOver?: (event: EnhancedInputMouseEvent) => void;
`

$3

The PillDecorator surrounds the text with a pill effect. It can be achieved via styling, but that will
cause the cursor to disappear.

$3

The title decorator shows a title over a textblock if the mouse enters.

$3

The clear button is a simple input decorator that allows the user to clear the input.

Types

$3

`js
id: string;
unique id to identiy the textblock

start: number;
starting point of the block in the text

length: number;
The length of the block

style?: string;
The CSS style to apply to the text - must be CSS, not React styles.

customProps?: any;
Properties to pass to the decorator.

Decorator?: React.ElementType;
The decorator used to decorate the textblock.

decoratorStyle?: React.CSSProperties;
The style to apply to the decorator. This is a React CSS object

dropDown?: DropDownOptions;
If you want to show a dropdown the options for the dropdown.
`

$3

`js
options: string[];
The options to show to the user.

activation?: Activation;
The activiation method. Can be either 'mouseover' - shows when mouse is over textblock, or 'cursorposition' - shows when the cursor is in the textblock
`

$3

Component props are passed to decorator components

`js
clasName?: string;
Classname to use for this decorator.

style?: React.CSSProperties;
React style to apply to this decorator.

id: string;
Id of the text block.

text: string;
Text in the textblock.

start: number;
Start position in the text of the block.

end: number;
End position in the text of the block.

cursorPosition: number;
Current position of the cursor in the text

textElement: HTMLSpanElement;
The element of the textblock.

customProps?: any;
Custom properties defiend in tht textblock.
``