https://github.com/mike-engel/floating-label-react
A floating-label component using react without any dependencies
https://github.com/mike-engel/floating-label-react
accessibility design design-patterns floating-labels react
Last synced: over 1 year ago
JSON representation
A floating-label component using react without any dependencies
- Host: GitHub
- URL: https://github.com/mike-engel/floating-label-react
- Owner: mike-engel
- License: mit
- Created: 2017-06-23T03:37:54.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2024-09-24T06:42:44.000Z (almost 2 years ago)
- Last Synced: 2025-03-15T17:02:47.373Z (over 1 year ago)
- Topics: accessibility, design, design-patterns, floating-labels, react
- Language: CSS
- Size: 275 KB
- Stars: 26
- Watchers: 2
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 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`
```sh
# npm
npm install floating-label-react
# yarn
yarn add floating-label-react
```
# Usage
`FloatingLabel` takes in most standard [input attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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](https://github.com/final-form/react-final-form), [formik](https://jaredpalmer.com/formik/), something similar, your own custom state machine.
```js
import FloatingLabel from "floating-label-react";
this.setState(() => ({ value: evt.currentTarget.value }))}
/>;
```
## Textarea vs. Input
If you'd like a textarea instead, use the `component` prop.
```js
import FloatingLabel from "floating-label-react";
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.!
```js
import FloatingLabel from "floating-label-react";
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.
```js
import FloatingLabel from "floating-label-react";
import "floating-label-react/styles.css";
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.
```sh
# install dependencies
npm install
# build the project for distribution
npm run build
```
# [Changelog](CHANGELOG.md)
# [Code of Conduct](CODE_OF_CONDUCT.md)
# [License](LICENSE.md)
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Mike Engel
🐛 💬 💻 📖 🎨 🤔 🚇 👀 ⚠️
Mikhail Semin
💻
Priyank Trivedi
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!