Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

floating-label-react

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

floating-label-react

A floating-label component using react without any dependencies

  • 1.0.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.6K
decreased by-28.78%
Maintainers
1
Weekly downloads
 
Created
Source

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!

Keywords

FAQs

Package last updated on 30 Aug 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc