Scout24/react-floating-label-input

Name: react-floating-label-input

Owner: AutoScout24

Description: A floating label input component for React with control over label shrinking percentage.

Forked from: cymen/react-floating-label-input

Created: 2018-03-05 12:51:32.0

Updated: 2018-03-05 12:51:34.0

Pushed: 2017-12-02 06:14:23.0

Homepage: http://blog.cymen.org/react-floating-label-input

Size: 1572

Language: HTML

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

react-floating-label-input

This is a floating label component for React. It inherits the font-size from the parent so you can easily set the desired input font-size in your own CSS. It also accepts a shrink property which can be 1-99 inclusive. That is the percentage the label should be of the input font size. That means if you have a font size of 20px on the input, the default 70% will result in a 14px label size (20 * 0.7 = 14).

Examples

Visual

Try it yourself at the Storybook.

Code

Here is the 3rd example above in JSX (64px font size with 20% label shrinkage):

rt React from 'react';
rt FloatingLabelInput from 'react-floating-label-input';
rt 'react-floating-label-input/dist/react-floating-label-input.css';

rt default ({ onChange, value }) =>
iv style={{ fontSize: 64 }}>
<FloatingLabelInput
  id="example-3"
  label="label"
  onChange={onChange}
  shrink={20}
  value={value}
/>
div>;

Props

| name | optional | default | |————–|———-|————| | fontSize | yes | inherit | | id | no | | | label | no | | | onBlur | yes | | | onChange | no | | | onFocus | yes | | | placeholder | yes | '' | | shrink | yes | 70% | | type | yes | text | | value | yes | '' |

Styling

The component renders with a DOM class of react-floating-label-input.

Dependencies

Peer dependencies:

• react
• react-dom
• classnames

License

MIT