cnilton / react-floating-text-input

A simple and customizable React input with it's placeholder always shown.

About

This is a React input component, containing a floating placeholder, visible even after filled in, that you can freely modify its styles 💅🎉

/** placeholder value */
placeholder?: string;
/** Set your placeholder styles */
placeholderStyles?: CSSProperties;
/** Floating label shown all times */
label?: string;
/** Set your label styles */
labelStyles?: CSSProperties;
/** Set your label properties */
labelProperties?: HTMLAttributes<HTMLSpanElement>;
/** Set your label styles */
customLabelStyles?: CustomLabelStyles;
/** Input value */
value?: string;
/** Set your input styles */
inputStyles?: CSSProperties;
/** Set your input properties */
inputProperties?: HTMLAttributes<HTMLInputElement>;
/** Calback to value change */
onChange?: React.ChangeEvent<HTMLInputElement>;
/** Set your input container styles */
containerStyles?: CSSProperties;
/** Set your input container properties */
containerProperties?: HTMLAttributes<HTMLDivElement>;
/** Set your label as a static floating label */
staticLabel?: boolean;

Instalation

To install just input the following command:

npm i react-floating-text-input

or

yarn add react-floating-text-input

🚧 Props table will be available soon 🚧