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.
; <FloatingLabel id="email" name="email" placeholder="Your email" type="email" value=thisstatevalue onChange= this/>;
Textarea vs. Input
If you'd like a textarea instead, use the component
prop.
; <FloatingLabel id="email" component="textarea" name="email" placeholder="Your email" type="email" value=thisstatevalue onChange= this/>;
Styling
FloatingLabel
is fully stylable through the className
prop. This works well with vanilla CSS, SASS, Less, styled-components, emotion, etc.!
; <FloatingLabel id="email" name="email" placeholder="Your email" className="custom-class" type="email" value=thisstatevalue onChange= this/>;
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.
;; <FloatingLabel id="email" name="email" placeholder="Your email" type="email" value=thisstatevalue onChange= this/>;
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 🐛 💬 💻 📖 🎨 🤔 🚇 👀 ⚠️ |
Mikhail Semin 💻 |
Priyank Trivedi 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!