open-index/open-npm huggingface dataset:
npm package: @material/react-button
Description: Material Components React Button
Latest version: 0.15.0

# React Button

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

## Installation

```
npm install @material/react-button
```

## Usage

### Styles

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

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

### Javascript Instantiation
```js
import React from 'react';
import Button from '@material/react-button';

class MyApp extends React.Component {
  render() {
    return (
      <Button>
        Click Me!
      </Button>
    );
  }
}
```

## Props

Prop Name | Type | Description
--- | --- | ---
className | String | Classes to be applied to the root element.
raised | Boolean | Enables raised variant.
unelevated | Boolean | Enables unelevated variant.
outlined | Boolean | Enables outlined variant.
dense | Boolean | Enables dense variant.
icon | Element | Icon to render within root element.
trailingIcon | Element | Icon to render on the right side of the element
children | String | Text to be displayed within root element.
disabled | Boolean | Disables button if true.
href | String | Sets a hyperlink & uses anchor tag instead of a button.

## 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-button/README.md#sass-mixins)

## Usage with Icons

Please see our [Best Practices doc](../../docs/best-practices.md#importing-font-icons) when importing or using icon fonts.
npm package: @material/react-checkbox
Description: Material Components React Checkbox
Latest version: 0.15.0

# React Checkbox

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

## Installation

```
npm install @material/react-checkbox
```

## Usage

### Styles

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

with CSS:
```js
import "@material/react-checkbox/dist/checkbox.css";
```

### Javascript Instantiation

```js
import React from 'react';
import Checkbox from '@material/react-checkbox';

class MyApp extends React.Component {
  state = {checked: false, indeterminate: false};

  render() {
    return (
      <React.Fragment>
        <Checkbox
          nativeControlId='my-checkbox'
          checked={this.state.checked}
          indeterminate={this.state.indeterminate}
          onChange={(e) => this.setState({
            checked: e.target.checked,
            indeterminate: e.target.indeterminate})
          }
        />
        <label htmlFor='my-checkbox'>My Checkbox</label>
      </React.Fragment>
    );
  }
}
```

> _NOTE_: In order to get access to the checked or indeterminate value, you must add an `onChange` handler that accepts an `Event` and updates state as shown above.

## Props

Prop Name | Type | Description
--- | --- | ---
className | String | Classes to be applied to the checkbox element
checked | Boolean | Indicates whether the checkbox is checked ("on")
indeterminate | Boolean | Indicates whether the checkbox is indeterminate
disabled | Boolean | Indicates whether the checkbox is disabled
nativeControlId | String | Id attached to the native control for relationship with the label

## 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-checkbox/README.md#sass-mixins)
npm package: @material/react-fab
Description: Material Components React Floating Action Button (FAB)
Latest version: 0.15.0

# React Floating Action Button

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

## Installation

```
npm install @material/react-fab
```

## Usage

### Styles

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

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

### JSX Structure

The Fab can be used with the `span`, `i`, `img` or `svg` elements. It can also be used with the
[Material Icon](../material-icon) react component.
```html
<Fab icon={<span className="material-icons">favorite</span>}/>

<Fab icon={<i className="material-icons">favorite</i>}/>

<Fab icon={
  <svg xmlns="http://www.w3.org/2000/svg" className="material-icons" viewBox="0 0 24 24">
  ...
  </svg>
  }/>

<Fab icon={<img className="material-icons" src="/images/ic_button_24px.svg"/>}/>

<Fab icon={<MaterialIcon icon="favorite"/>}/>
```

## Props

Prop Name | Type | Description
--- | --- | ---
className | String | Classes to be applied to the root element.
exited | Boolean | When true animates the FAB out of view. When this false, the FAB will return to view.
mini | Boolean |  Enables the mini variant. 
icon | Element | The icon.
textLabel | String | The label, which makes the FAB extended.

## 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-fab/README.md#advanced-sass-mixins)

## Usage with Icons

Please see our [Best Practices doc](../../docs/best-practices.md#importing-font-icons) when importing or using icon fonts.
npm package: @material/react-floating-label
Description: Material Components React Floating Label
Latest version: 0.15.0

# 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)