Please add the MIT license to your repository.

Hi hi
I was looking at this lib (got here through a post in Medium)
And it looks really good and simple.
The only thing that I'm missing in order to put in my production app is the testing.
I need to guarantee that the component will not break my app, or that accidentally the usage API has been changed.
The tests will make sure nothing breaks, and if the usage is changed - this will help indicate that probably a major version needs to change.
(I currently don't have the time to help with the testing implementation itself, but feel free to contact me for guidance or moral support :D)

Well done on the lib 👍

Animating the top property will have some performance impacts, basically animating top will trigger the browser to perform layout operations.
Instead use transform with translateY so the operation can likely be carried out by the compositor thread with the help of the GPU.

Hi, I am thank you for creating very nice package.

I installed the package and it run very good everytime I change the page. But in the dynamic route (Ex: [slug].js) the effect just run in the first time. When the [slug] is changed, the effect not run anymore.

I am using Nextjs, use getStaticProps() to get data and not use useEffect in my site.
Can you show me something to do?

Soory if my english is not very good ^^

Using webpack5 the produced ie11 (es5) code doesn't work

Object.defineProperty(exports, "__esModule", ({ value: true }));
const react_1 = __importStar(__webpack_require__(67294));
function FadeIn(props) {
    const [maxIsVisible, setMaxIsVisible] = react_1.useState(0);
    const transitionDuration = props.transitionDuration || 400;
    const delay = props.delay || 50;
    const WrapperTag = props.wrapperTag || "div";
    const ChildTag = props.childTag || "div";
    const visible = typeof props.visible === "undefined" ? true : props.visible;
    react_1.useEffect(() => {
        let count = react_1.default.Children.count(props.children);
        if (!visible) {
            // Animate all children out
            count = 0;
        }
        if (count == maxIsVisible) {
            // We're done updating maxVisible, notify when animation is done
            const timeout = setTimeout(() => {
                if (props.onComplete)
                    props.onComplete();
            }, transitionDuration);
            return () => clearTimeout(timeout);
        }
        // Move maxIsVisible toward count
        const increment = count > maxIsVisible ? 1 : -1;
        const timeout = setTimeout(() => {
            setMaxIsVisible(maxIsVisible + increment);
        }, delay);
        return () => clearTimeout(timeout);
    }, [
        react_1.default.Children.count(props.children),
        delay,
        maxIsVisible,
        visible,
        transitionDuration,
    ]);
    return (react_1.default.createElement(WrapperTag, { className: props.className }, react_1.default.Children.map(props.children, (child, i) => {
        return (react_1.default.createElement(ChildTag, { className: props.childClassName, style: {
                transition: `opacity ${transitionDuration}ms, transform ${transitionDuration}ms`,
                transform: maxIsVisible > i ? "none" : "translateY(20px)",
                opacity: maxIsVisible > i ? 1 : 0,
            } }, child));
    })));
}
exports.default = FadeIn;

I have a FadeIn implementation but only appear when its firstly render, how to do I for re render when a prop change?

I am loading images and change the render component between (MaterialUI) and

the library uses transform: translateY(nn); to make the effect in the parent element,
however if a child tries to use position: fixed, the element won't be in a fixed position.
example:
https://jsfiddle.net/nd68kpcu/

we should clean the inline css of translateY once the transition is complete

Hey, I rewrote this as a functional typescript component. Figured I'd pass it along if you want it, if not no worries. Feel free to close the issue.

import React from 'react';

interface Props {
  delay?: number;
  transitionDuration?: number;
  wrapperTag?: keyof JSX.IntrinsicElements;
  childTag?: keyof JSX.IntrinsicElements;
  children: React.ReactElement;
  className?: string;
  childClassName?: string;
}

const FadeIn = ({
  delay = 50,
  transitionDuration = 400,
  wrapperTag,
  childTag,
  children,
  className = null,
  childClassName = null,
}: Props): React.ReactElement => {
  const [maxIsVisible, setMaxIsVisible] = React.useState(0);
  const WrapperTag = wrapperTag || 'div';
  const ChildTag = childTag || 'div';

  React.useEffect(() => {
    const count = React.Children.count(children);
    let i = 0;
    const interval = setInterval(() => {
      i++;
      if (i > count) clearInterval(interval);

      setMaxIsVisible(i);
    }, delay);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <WrapperTag className={className}>
      {React.Children.map(children, (child, i) => {
        return (
          <ChildTag
            className={childClassName}
            style={{
              transition: `opacity ${transitionDuration}ms, transform ${transitionDuration}ms`,
              transform: `translateY(${maxIsVisible > i ? 0 : 20}px)`,
              maxHeight: maxIsVisible > i ? '100%' : '0%',
              overflow: 'hidden',
              opacity: maxIsVisible > i ? 1 : 0,
            }}
          >
            {child}
          </ChildTag>
        );
      })}
    </WrapperTag>
  );
};

export default FadeIn;

Any way to play it backwards and then unmount inner components?

I think it would be useful for FadeIn to accept a property like "div" or "article" to select the HTML element of the wrapper.

This is one of my favourite UI libraries :) Thank you to everyone who has contributed.

Are there any plans to add a direction prop? Would be nice to specify the direction they animation should fade-in from.

Cheers!

Hallo,

could something be done with it?

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! react@"^18.2.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^16.8 || 17" from [email protected] npm ERR! node_modules/react-fade-in npm ERR! react-fade-in@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

TS7016: Could not find a declaration file for module 'react-fade-in'. '/home/ryan/Code/llapp10/node_modules/react-fade-in/lib/index.js' implicitly has an 'any' type.   Try npm i --save-dev @types/react-fade-in if it exists or add a new declaration (.d.ts) file containing declare module 'react-fade-in';