# react-fade

> Simple fades in React

Latest version **1.1.1** (published 2016-07-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-fade
pnpm add react-fade
yarn add react-fade
bun add react-fade
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2016-07-12 |
| First published | 2016-05-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Benjamin Tatum |
| Maintainers | bentatum |
| Keywords | fade, fade in, fade out, appear, disappear, show, hide, react |

## Links

- npm: https://www.npmjs.com/package/react-fade
- Repository: https://github.com/bentatum/react-fade
- Homepage: https://github.com/bentatum/react-fade#readme
- Issues: https://github.com/bentatum/react-fade/issues
- npm.io page: https://npm.io/package/react-fade

## Dependencies (1)

- [minify-css-string](https://npm.io/package/minify-css-string.md) ^1.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2016-07-12
- 1.1.0 — 2016-07-12
- 0.0.3 — 2016-05-23
- 0.0.2 — 2016-05-23
- 0.0.1 — 2016-05-23

## README

[![npm][npm-image]][npm-url]
[![travis][travis-image]][travis-url]
[![standard][standard-image]][standard-url]

[npm-image]: https://img.shields.io/npm/v/react-fade.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/react-fade
[travis-image]: https://img.shields.io/travis/bentatum/react-fade.svg?style=flat-square
[travis-url]: https://travis-ci.org/bentatum/react-fade
[standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
[standard-url]: http://npm.im/standard

# react-fade

Simple fades in React

`npm i react-fade`

## Fade in
Children components will start invisible and fade into a visible state.
```js
<Fade>
  <p>I am so faded</p>
</Fade>
```

## Fade out
Fade out requires some extra code to stay invisble after it's been faded-out. Right now, the recommended way of using `<Fade out/>` is to utilize the *duration* property in conjuction with css display or visibilty. For example:
```js
import { default as React, Component } from 'react'
import { default as Fade } from 'react-fade'

const fadeDuration = 10

class FadeExample extends Component {

  state = {
    fadeOut: false,
    visibility: 'visible'
  }

  componentDidUpdate(nextProps, { fadeOut }) {
    if (fadeOut) {
      setTimeout(() => {
        this.setState({
          visibility: 'hidden'
        })
      }, fadeDuration)
    }
  }
  
  render() {
    return (
      <div>
        <Fade
          out={this.state.fadeOut}
          duration={fadeDuration}
          style={{
            visibility: this.state.visibility
          }}
        >
          <p>I am so faded</p>
        </Fade>
        <button onClick={() => this.setState({ fadeOut: true })}>
          Fade out
        </button>
      </div>
    )
  }
}
```

### Props
| Prop          | Type                      | Description                                                             |
| :------------ | :------------------------ | :---------------------------------------------------------------------- |
| out           | bool                      | fades out instead of in - see instructions for usage patterns           |
| duration      | number                    | the amount of time in seconds that it takes to fade in or out           |

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