npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-fader

v3.2.0

Published

component that fades out old children, then fades in new children when its children change

Downloads

2,058

Readme

react-fader

CircleCI Coverage Status semantic-release Commitizen friendly npm version

A React Component that fades out its old child, then fades in its new child when its children change. It can also optionally animate its height and/or width from one child's size to the other. Works well with react-router!

Usage

npm install --save react-fader
import React from 'react'
import ReactDOM from 'react-dom'
import Fader from 'react-fader'

ReactDOM.render(
  <Fader>
    <h3>Foo</h3>
  </Fader>,
  document.getElementById('root')
)

// Just change its children to something !==, and it will perform a fade transition.

ReactDOM.render(
  <Fader>
    <h3>Bar</h3>
  </Fader>,
  document.getElementById('root')
)

Transitioning between child routes with react-router version 4

While it can be done with <Switch>, I recommend using react-router-transition-switch instead:

import {Route, BrowserRouter as Router} from 'react-router-dom'
import TransitionSwitch from 'react-router-transition-switch'
import Fader from 'react-fader'

<Router>
  <TransitionSwitch component={Fader}>
    <Route path="/red" component={Red}/>
    <Route path="/green" component={Green} />
    <Route path="/blue" component={Blue} />
  </TransitionSwitch>
<Router>

Props

animateHeight: boolean (default: true)

If truthy, Fader will animate its height to match the height of its children.

animateWidth: boolean (default: true)

If truthy, Fader will animate its width to match the height of its children.

shouldTransition: (oldChildren: any, newChildren: any) => boolean (default: compares keys)

Allows you to determine whether Fader should perform a transition from oldChildren to newChildren. By default, it returns true if oldChildren !== newChildren or their keys are not equal.

fadeOutTransitionDuration: number (default: 200)

The duration of the fade out transition, in milliseconds.

fadeOutTransitionTimingFunction: string (default: 'ease')

The timing function for the fade out transition.

fadeInTransitionDuration: number (default: 200)

The duration of the fade in transition, in milliseconds.

fadeInTransitionTimingFunction: string (default: 'ease')

The timing function for the fade in transition.

sizeTransitionDuration: number (default: 200)

The duration of the size transition, in milliseconds.

sizeTransitionTimingFunction: string (default: 'ease')

The timing function for the size transition.

prefixer: Prefixer

If given, overrides the inline-style-prefixer used to autoprefix inline styles.

className: string

Any extra class names to add to the root element.

style: Object

Extra inline styles to add to the root element.

viewStyle: Object

Extra inline styles to add to the view wrapper elements.

innerViewWrapperStyle: Object

Extra inline styles to add to the inner div between the viewStyle div and your view content element. (The inner div was added to ensure perfect height animation.)