floating-label-react

> A floating-label component using react without any dependencies

This react component exists to provide a simple API for floating label inputs in react, while still being fully customizeable.

Installation

Use npm, yarn, or whatever npm package manager variant you use to install floating-label-react

``sh


npm

npm install floating-label-react

yarn

yarn add floating-label-react
`

Usage

FloatingLabel takes in most standard input attributes available in HTML5.

Basic usage

It's important to note that as of 1.0, floating-label-react is now a display component only. This means you need to manage form state via react-final-form, formik, something similar, your own custom state machine.

`js
import FloatingLabel from "floating-label-react";

id="email"
name="email"
placeholder="Your email"
type="email"
value={this.state.value}
onChange={evt => this.setState(() => ({ value: evt.currentTarget.value }))}
/>;
`

Textarea vs. Input

If you'd like a textarea instead, use the component prop.

`js
import FloatingLabel from "floating-label-react";

id="email"
component="textarea"
name="email"
placeholder="Your email"
type="email"
value={this.state.value}
onChange={evt => this.setState(() => ({ value: evt.currentTarget.value }))}
/>;
`

Styling

FloatingLabel is fully stylable through the className prop. This works well with vanilla CSS, SASS, Less, styled-components, emotion, etc.!

`js
import FloatingLabel from "floating-label-react";

id="email"
name="email"
placeholder="Your email"
className="custom-class"
type="email"
value={this.state.value}
onChange={evt => this.setState(() => ({ value: evt.currentTarget.value }))}
/>;
`

Additionally, a set of default styles are available within the package at styles.css. If your bundler support it, you can import them within your application.

`js
import FloatingLabel from "floating-label-react";
import "floating-label-react/styles.css";

id="email"
name="email"
placeholder="Your email"
type="email"
value={this.state.value}
onChange={evt => this.setState(() => ({ value: evt.currentTarget.value }))}
/>;
`

Contributing

Issues and Pull requests are always welcome. Please keep in mind that there is a code of conduct.

To get started, install the dev dependencies and build the exports if needed.

`sh


install dependencies

npm install

build the project for distribution

npm run build
``

Changelog

Code of Conduct

License

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Mike Engel 🐛 💬 💻 📖 🎨 🤔 🚇 👀 ⚠️

Mikhail Semin 💻

Priyank Trivedi 💻

This project follows the all-contributors specification. Contributions of any kind welcome!