react-floating-label-textarea

A floating label component for React. It inherits the font-size from the parent.

Try it yourself at the Storybook.

Example

import React from 'react';
import FloatingLabelTextarea from 'react-floating-label-textarea';

export default ({ onChange, value }) =>
  <div style={{ fontSize: 64 }}>
    <FloatingLabelTextarea
      id="example-3"
      label="label"
      onBlur={action('onBlur')}
      onChange={action('onChange')}
      onFocus={action('onFocus')}
      value={value}
    />
  </div>;

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 textarea

Dependencies

Peer dependencies:

• react
• styled-components

License

MIT