# @material/react-notched-outline

> Material Componens React Notched Outline

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

## Install

```sh
npm install @material/react-notched-outline
pnpm add @material/react-notched-outline
yarn add @material/react-notched-outline
bun add @material/react-notched-outline
```

## 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 | 91.1 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, notched outline, notchedoutline |

## Links

- npm: https://www.npmjs.com/package/@material/react-notched-outline
- 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-notched-outline

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@material/notched-outline](https://npm.io/package/@material/notched-outline.md) ^1.1.1

## 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.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
- 0.4.0 — 2018-07-30
- … 3 more at https://npm.io/package/@material/react-notched-outline/versions

## README

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

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