Skip to content

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

Notifications You must be signed in to change notification settings

Cnilton/react-floating-text-input

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm npm npm

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 🚧

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published