A floating label input component for React
npm install react-floating-label-input
[![License][license-image]][license-url]
[![Downloads][downloads-image]][downloads-url]
!minified size
!minzipped size
[![npm badge][npm-badge-png]][package-url]
A floating label component for React. It inherits the font-size from the parent.
Try it yourself at the Storybook.
``jsx
import React from 'react';
import FloatingLabelInput from 'react-floating-label-input';
export default ({ onChange, value }) =>
Props
| name | optional | default |
|--------------|----------|------------|
| className | yes | |
| fontSize | yes | inherit |
| id | no | |
| label | no | |
| onBlur | yes | |
| onChange | no | |
| onFocus | yes | |
| placeholder | yes | '' |
| refs | yes | |
| type | yes | text |
| value | yes | '' |
*
refs is set as ref prop on input`Peer dependencies:
* react
* styled-components
[package-url]: https://npmjs.org/package/react-floating-label-input
[npm-version-svg]: http://versionbadg.es/cymen/react-floating-label-input.svg
[npm-badge-png]: https://nodei.co/npm/react-floating-label-input.png?downloads=true&stars=true
[license-image]: http://img.shields.io/npm/l/react-floating-label-input.svg
[license-url]: LICENSE
[downloads-image]: http://img.shields.io/npm/dm/react-floating-label-input.svg
[downloads-url]: http://npm-stat.com/charts.html?package=react-floating-label-input