react-enhanced-input
v0.1.1
Published
Input component where you can style or decorate text blocks.
Downloads
10
Maintainers
Readme
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.