Research
Security News
Threat Actor Exposes Playbook for Exploiting npm to Build Blockchain-Powered Botnets
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
floating-label-react
Advanced tools
A floating-label component using react without any dependencies
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.
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
FloatingLabel
takes in most standard input attributes available in HTML5.
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 }))}
/>;
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 }))}
/>;
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 }))}
/>;
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
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!
FAQs
A floating-label component using react without any dependencies
The npm package floating-label-react receives a total of 1,091 weekly downloads. As such, floating-label-react popularity was classified as popular.
We found that floating-label-react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.