A floating-label component using react without any dependencies
Switch branches/tags
Nothing to show
Clone or download
Latest commit 73d93ab Oct 23, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Initial commit Jun 23, 2017
.npmignore Initial commit Jun 23, 2017
CODE_OF_CONDUCT.md Initial commit Jun 23, 2017
LICENSE.md Initial commit Jun 23, 2017
README.md es6 & add github in package Jan 3, 2018
index.js Adding disabled to the Node element Oct 5, 2018
package-lock.json 0.3.0 Oct 23, 2018
package.json 0.3.0 Oct 23, 2018
rollup.config.js chore(dependencies): Update outdated dependencies Oct 23, 2018

README.md

floating-label-react

A floating-label component using react without any dependencies

This react component exists to provide a robust 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. Here is the most basic usage of FloatingLabel

import FloatingLabel from 'floating-label-react'

<FloatingLabel
  id='email'
  name='email'
  placeholder='Your email'
  type='email'
/>

If you'd like a textarea instead, use the element prop.

import FloatingLabel from 'floating-label-react'

<FloatingLabel
  id='email'
  element='textarea'
  name='email'
  placeholder='Your email'
  type='email'
/>

FloatingLabel is fully customizeable, so you're free to pass in your own props via the styles attribute. It does use some default styles I think look nice, but feel free to use your own, or extend the default ones!

import FloatingLabel, {
  floatingStyles,
  focusStyles,
  inputStyles,
  labelStyles
} from 'floating-label-react'

const inputStyle = {
  floating: {
    ...floatingStyles,
    color: 'blue'
  },
  focus: {
    ...focusStyles,
    borderColor: 'blue'
  },
  input: {
    ...inputStyles,
    borderBottomWidth: 2,
    borderBottomColor: 'black',
    width: '100%'
  },
  label: {
    ...labelStyles,
    marginTop: '.5em',
    width: '100%'
  }
}

<FloatingLabel
  id='email'
  name='email'
  placeholder='Your email'
  styles={inputStyle}
  type='email'
/>

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

Code of Conduct

License