React Enhanced Input

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

Visit the Demo page

To install

yarn add react-enhanced-input

or

npm i react-enhanced-input

Components

EnhancedInput

The EnhancedInput component is the package's primary component.

Properties

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<DropDownProps>;
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<HTMLPreElement>) => void;
onBlur?: (event: React.FocusEvent<HTMLPreElement>) => void;
onClick?: (event: React.MouseEvent<HTMLPreElement>) => void;
onDoubleClick?: (event: React.MouseEvent<HTMLPreElement>) => void;
onMouseDown?: (event: React.MouseEvent<HTMLPreElement>) => void;
onMouseUp?: (event: React.MouseEvent<HTMLPreElement>) => void;
onMouseEnter?: (event: React.MouseEvent<HTMLPreElement>) => void;
onMouseLeave?: (event: React.MouseEvent<HTMLPreElement>) => void;
onMouseOver?: (event: React.MouseEvent<HTMLPreElement>) => void;
onKeyDown?: (event: React.KeyboardEvent<HTMLPreElement>) => void;
onKeyUp?: (event: React.KeyboardEvent<HTMLPreElement>) => 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;

PillDecorator

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

TitleDecorator

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

ClearButton

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

Types

TextBlock

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<ComponentProps>;
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.

DropDownOptions

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

ComponentProps

Component props are passed to decorator components

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.