open-index/open-npm huggingface dataset:
npm package: @material/react-line-ripple
Description: Material Components React Line Ripple
Latest version: 0.15.0

# React Line Ripple

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

## Installation

```
npm install @material/react-line-ripple
```

## Usage

### Styles

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

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

### Javascript Instantiation

```js
import LineRipple from '@material/react-line-ripple';

const MyComponent = () => {
  return (
    <LineRipple />
  );
}
```

## Props

Prop Name | Type | Description
--- | --- | ---
active | boolean | Activates or deactivates the line ripple state.
className | string | Classes to be applied to the root element.
rippleCenter | number | Sets the center of the ripple animation.
style | object | Inline styles of root element.

## 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-line-ripple/README.md#sass-mixins)
npm package: @material/react-linear-progress
Description: Material Components React Linear Progress
Latest version: 0.15.0

# React Linear Progress

A React version of an [MDC Linear Progress](https://github.com/material-components/material-components-web/tree/master/packages/mdc-linear-progress) component.

## Installation

```
npm install @material/react-linear-progress
```

## Usage

### Styles

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

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

### Javascript Instantiation
```js
import LinearProgress from '@material/react-linear-progress';
import React from 'react';

class MyApp extends React.Component {
  render() {
    return (
      <LinearProgress
        buffer={0.9}
        progress={0.8}
      />
    );
  }
}
```

## Props

Prop Name | Type | Description
--- | --- | ---
buffer | Number | Decimal value between 0 and 1, sets the buffer bar width
bufferingDots | Boolean | Default `true`. Whether to show the buffer dots in the un-progressed section
className | String | Optional. Additional class names to add to the root component
closed | Boolean | Default `false`. When changed to `true`, closes the component
indeterminate | Boolean | Default `false`. When set to `true`, renders the indeterminate variant
progress | Number | Decimal value between 0 and 1, sets the progress bar width
reversed | Boolean | Default `false`. When set to `true`, renders the reversed variant
tag | String | Default `'div'`. The tag type to render

## 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/tree/master/packages/mdc-linear-progress#sass-mixins)
npm package: @material/react-material-icon
Description: Material Components React Material Icon
Latest version: 0.15.0

# React Material Icon

A React wrapper for [Material Icons](http://material.io/tools/icons).

## Installation

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

## Usage

### Styles

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

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

#### Importing Icons

The React material icon package does not come packaged with [Google Font's Material Icons](https://google.github.io/material-design-icons/). If it was included in the Sass package this would block rendering of the page until the icons download.

There are two different ways to add Material Icons to your website, both of which are documented in [Material Icons Documentation](https://google.github.io/material-design-icons/#icon-font-for-the-web). We recommend "Method 1: via Google Web Fonts", because it renders faster, but there can be Flash Of Unstyled Content (**FOUC**). The code to load Material Icons via Google Web Fonts is pasted here for your convenience.
```
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
```

##### Preventing FOUC and Troubleshooting Ripple

There is a known issue if you turn on the ripple on the Material Icon component. If FOUC occurs, the ripple size will be calculated off of the text width/height. To get around this, give the component a predetermined width/height in your CSS (or inline styles). Original issue documented [here](https://github.com/material-components/material-components-web/issues/2702).

### Javascript Instantiation

```js
import MaterialIcon from '@material/react-material-icon';

const MyComponent = () => {
  return (
    <MaterialIcon icon='menu' />
  );
}
```

## Props

Prop Name | Type | Description
--- | --- | ---
icon | string | Type of icon to be displayed.
className | string | Classes to pass on to the root `<i>` element.
hasRipple | n/a | If present on element, it will enable the ripple on the icon.

## Usage with Icons

Please see our [Best Practices doc](../../docs/best-practices.md#importing-font-icons) for further reading.
npm package: @material/react-notched-outline
Description: Material Componens React Notched Outline
Latest version: 0.15.0

# React Notched Outline

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

## Installation

```
npm install @material/react-notched-outline
```

## Usage

### Styles

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

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

### Javascript Instantiation

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

const MyComponent = () => {
  return (
    <NotchedOutline notch>
      <FloatingLabel float>My Label</FloatingLabel>
    </NotchedOutline>
  );
}
```

#### Variant with No Notch

```js
import NotchedOutline from '@material/react-notched-outline';

const MyComponent = () => {
  return (
    <React.Fragment>
      <label>My Label</label>
      <NotchedOutline />
    </React.Fragment>
  );
}
```

## Props

Prop Name | Type | Description
--- | --- | ---
className | String | Classes to be applied to the root element.
notch | Boolean | Toggles between notched outline and idle outline state.
notchWidth | Number | Width of the notch in the outline.

## 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-notched-outline/README.md#sass-mixins)
npm package: @material/react-radio
Description: Material Componens React Radio
Latest version: 0.15.0

# React Radio

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

## Installation

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

## Usage

### Styles

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

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

### Javascript Instantiation

```js
import React from 'react';
import Radio, {NativeRadioControl} from '@material/react-radio';

class MyApp extends React.Component {
  state = {petValue: null};

  render() {    
    return (
      <div>
        <Radio label='Dog' key='dog'>
          <NativeRadioControl
            name='pets'
            value='dog'
            id='dog'
            onChange={(e) => this.setState({petValue: e.target.value})}
          />
        </Radio>
        <Radio label='Cat' key='cat'>
          <NativeRadioControl
            name='pets'
            value='cat'
            id='cat'
            onChange={(e) => this.setState({petValue: e.target.value})}
          />
        </Radio>
    </div>
    );
  }
}
```

> NOTE: The `.mdc-radio` element and the associated label are wrapped around an `.mdc-form-field` element for styling.

## Radio Props

Prop Name | Type | Description
--- | --- | ---
className | String | Classes to be applied to the `.mdc-radio` element.
wrapperClasses | String | Classes to be applied to the `.mdc-form-field` wrapper element.
label | String | Label associated with radio input control.

# NativeRadioControl Props

Prop Name | Type | Description
--- | --- | ---
className | String | Classes to be applied to the `.mdc-radio` element.
checked | Boolean | Default `false`. When true will switch radio to the checked state.
value | String | The associated value with the radio element.
disabled | Boolean | Default `false`. When true will disable the radio element.

## 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-radio/README.md#sass-mixins)
npm package: @material/react-snackbar
Description: Material Components React Snackbar
Latest version: 0.15.0

# React Snackbar

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

## Installation

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

## Usage

### Styles

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

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

### Javascript Instantiation
```js
import React from 'react';
import {Snackbar} from '@material/react-snackbar';

class MyApp extends React.Component {
  render() {
    return (
      <Snackbar message="Click Me!" actionText="dismiss" />
    );
  }
}
```

## Props

Prop Name | Type | Description
--- | --- | ---
message | String | Message to show in the snackbar
reason | String | Passed as argument when snackbar closes programatically
className | String | Classes to be applied to the root element.
timeoutMs | Number | Timeout in milliseconds when to close snackbar.
closeOnEscape | Boolean | Closes popup on "Esc" button if true.
actionText | String | Text for action button
leading | Boolean | Shows snackbar on the left if true (or right for rtl languages)
stacked | Boolean | Shows buttons under text if true
onAnnounce | Function() => void | Callback for handling screenreader announce event
onOpening | Function() => void | Callback for handling event, which happens before opening
onOpen | Function(evt: Event) => void | Callback for handling event, which happens after opening
onClosing | Function() => void | Callback for handling event, which happens before closing
onClose | Function() => void | Callback for handling event, which happens after closing

## Getting snackbar parameters

If you need to get the `timeoutMs`, `closeOnEscape`, or `open` value, then you can use a ref like so:

```js
import React from 'react';
import {Snackbar} from '@material/react-snackbar';
 class MyApp extends React.Component {
  getSnackbarInfo = (snackbar) => {
    if (!snackbar) return;
    console.log(snackbar.getTimeoutMs());
    console.log(snackbar.isOpen());
    console.log(snackbar.getCloseOnEscape());
  }
  render() {
    return (
      <Snackbar
        message="Click Me!"
        actionText="dismiss"
        ref={this.getSnackbarInfo}
      />
    );
  }
}
```

## 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-snackbar/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-switch
Description: Material Components React Switch
Latest version: 0.15.0

# React Switch

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

## Installation

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

## Usage

### Styles

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

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

### Javascript Instantiation

```js
import React from 'react';
import Switch from '@material/react-switch';

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

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

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

## Props

Prop Name | Type | Description
--- | --- | ---
className | String | Classes to be applied to the switch element
checked | Boolean | Indicates whether the switch is checked ("on")
disabled | Boolean | Indicates whether the switch 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-switch/README.md#sass-mixins)