Skip to content

mike-engel/floating-label-react

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

# 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.

import FloatingLabel from "floating-label-react";

<FloatingLabel
  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.

import FloatingLabel from "floating-label-react";

<FloatingLabel
  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.!

import FloatingLabel from "floating-label-react";

<FloatingLabel
  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.

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

<FloatingLabel
  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.

# 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
Mike Engel

🐛 💬 💻 📖 🎨 🤔 🚇 👀 ⚠️
Mikhail Semin
Mikhail Semin

💻
Priyank Trivedi
Priyank Trivedi

💻

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