# @material/react-floating-label

> Material Components React Floating Label

Latest version **0.15.0** (published 2019-07-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @material/react-floating-label
pnpm add @material/react-floating-label
yarn add @material/react-floating-label
bun add @material/react-floating-label
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.15.0 |
| Published | 2019-07-22 |
| First published | 2018-05-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 85.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | abhiomkar, acdvorak, aprigogin, azakus, bicknellr, bonniez, bwobrien, kfranqueiro, lynnjepsen, material-admin, moog16, patrickrodee, williamernest |
| Keywords | mdc web react, material components react, material design, floating label, text field floating label, floating label react |

## Links

- npm: https://www.npmjs.com/package/@material/react-floating-label
- Repository: https://github.com/material-components/material-components-web-react
- Homepage: https://github.com/material-components/material-components-web-react#readme
- Issues: https://github.com/material-components/material-components-web-react/issues
- npm.io page: https://npm.io/package/@material/react-floating-label

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@material/floating-label](https://npm.io/package/@material/floating-label.md) ^1.0.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.15.0 (latest) — 2019-07-22
- 0.14.1 — 2019-07-02
- 0.14.0 — 2019-06-25
- 0.13.0 — 2019-05-30
- 0.12.1 — 2019-05-08
- 0.12.0 — 2019-05-01
- 0.11.0 — 2019-03-19
- 0.8.0 — 2018-12-28
- 0.7.1 — 2018-11-30
- 0.7.0 — 2018-11-20
- 0.6.2 — 2018-11-07
- 0.6.1 — 2018-10-25
- 0.6.0 — 2018-10-24
- 0.5.0 — 2018-09-25
- 0.4.1 — 2018-08-13
- … 4 more at https://npm.io/package/@material/react-floating-label/versions

## README

# React Floating Label

A React version of an [MDC Floating Label](https://github.com/material-components/material-components-web/tree/master/packages/mdc-floating-label).

## Installation

```
npm install @material/react-floating-label
```

## Usage

### Styles

with Sass:
```js
import '@material/react-floating-label/index.scss';
```

with CSS:
```js
import '@material/react-floating-label/dist/floating-label.css';
```

### Positioning

React Floating Label is meant to be used with other Components, specifically input type elements. Floating label is positioned absolute, which requires the parent element to be position _relative_.

### Shake Label

To shake the label you'll need to add a _ref_ to the `<FloatingLabel />` element. Using the ref, you can then call `shake()` to start the shake animation. Ex:

```js
import FloatingLabel from '@material/react-floating-label';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // createRef was introduce in React v16.3
    // https://reactjs.org/docs/refs-and-the-dom.html#creating-refs
    this.floatingLabelElement = React.createRef();
  }

  render() {
    return (
      <FloatingLabel ref={this.floatingLabelElement}/>
        My Label
      </FloatingLabel>
    );
  }

  // ... later in code ...

  this.floatingLabelElement.current.shake();
}
```

### Label Width

Label width is set during mount, and is calculated from the `offsetWidth` property. The Component will call `handleWidthChange()` when mounted. `handleWidthChange()` will execute with a new width value if `this.props.children` changes.

```js
<FloatingLabel
  handleWidthChange={(width) => this.setState({width})}
>
  My Label
</FloatingLabel>
```

## Props

Prop Name | Type | Description
--- | --- | ---
className | String | Classes to be applied to the root element.
handleWidthChange | Function | Callback method to pass the width to a parent Component.
float | Boolean | Floats label depending on value passed.

## Sass Mixins

Sass mixins may be available to customize various aspects of the components. Please refer to the
MDC Web repository for more information on what mixins are available, and how to use them.

[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/master/packages/mdc-floating-label/README.md#scss-mixins)

---
_Source: https://npm.io/package/@material/react-floating-label · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._