Miss any of our Open RFC calls?Watch the recordings here! »

floating-label-react

1.0.3 • Public • Published

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!

Install

npm i floating-label-react

DownloadsWeekly Downloads

1,582

Version

1.0.3

License

MIT

Unpacked Size

17.4 kB

Total Files

10

Last publish

Collaborators

  • avatar