myt-react-snippets

Delightful React Animations Snippets. Super Light-Weight

Usage no npm install needed!

<script type="module">
  import mytReactSnippets from 'https://cdn.skypack.dev/myt-react-snippets';
</script>

README

github npm yarn bundlephobia

myt-react-snippets

This react animation library snippets which is build from the ground up to solve the problems in animation, transition, transition in group, scrollpossitions, etc... it has no extra dependencies which can be a light-weight.

installation

npm i myt-react-snippets

or

yarn add myt-react-snippets

How to use

import to your project

import { Animation, Transition, useScrollPosition, TransitionGroup } from 'myt-react-snippets'

Animation Usage

Animation is use when the className is animate by css property animation and keyframe.
It can even use animate.css for cool animations.

Edit myt-react-snippets-animation

/*css*/
    .fade-in {
        animation: fade-in 1s ease-in;
    }

    .fade-out {
        animation: fade-out 1s ease-out;
    }

    @keyframes fade-out {
        0% {
            opacity: 1;
        } 

        100% {
            opacity: 0; 
        }

    }

    @keyframes fade-in {
        0% {
            opacity: 0;
        } 

        100%{
            opacity: 1; 
        }
    }

    const [showMessage, setShowMessage] = React.useState(false);
    const [showButton, setShowButton] = React.useState(true);
    const clickHandler = e => {
        setShowMessage(!showMessage);
    };
    return (
        <>
        {showButton && (
            <button type="button" onClick={clickHandler}>
            Show
            </button>
        )}
        <Animation
            in={showMessage}
            className="fade"
            onEnter={() => setShowButton(false)}
            onExited={() => setShowButton(true)}
        >
            <div className="banner">
                Hello There
                <button style={{ float: "right" }} onClick={clickHandler}>
                    Close
                </button>
            </div>
        </Animation>
        </>
    );

Transition Usage

Transition is use when the className is animated by css property transition.

Edit myt-react-snippets-transition

/*css*/
    .fade-in {
        opacity: 1;
        transition: opacity 1s ease-in
    }

    .fade-out {
        opacity: 0;
        transition: opacity 1s ease-out;
    }

    const [showMessage, setShowMessage] = React.useState(false);
    const [showButton, setShowButton] = React.useState(true);
    const clickHandler = e => {
        setShowMessage(!showMessage);
    };
    return (
        <>
        {showButton && (
            <button type="button" onClick={clickHandler}>
            Show
            </button>
        )}
        <Transition
            in={showMessage}
            className="fade"
            onEnter={() => setShowButton(false)}
            onExited={() => setShowButton(true)}
        >
            <div className="banner">
                Hello There
                <button style={{ float: "right" }} onClick={clickHandler}>
                    Close
                </button>
            </div>
        </Transition>
        </>
    );

TransitionGroup Usage

TransitionGroup is a managing container tool for Transition when items is mounting and unmounting dynamically.

Edit myt-react-snippets-transition-group

    const [items, setItem] = React.useState([
        { id: ++unique, text: "list-1" },
        { id: ++unique, text: "list-2" },
        { id: ++unique, text: "list-3" }
    ]);

    return (
        <> 
        <div className="list-group">
            <TransitionGroup>
            {items.map(item => (
                <Transition key={item.id} className="fade">
                <div className="list">
                    <button
                    type="button"
                    onClick={e =>
                        setItem(state => state.filter(it => it.id !== item.id))
                    }
                    >
                    &times;
                    </button>
                    {` ${item.text}`}
                </div>
                </Transition>
            ))}
            </TransitionGroup>
        </div>
        <p>
            <input id="todo" className="inpt"/>
            <button
            className="btn"
            onClick={() =>
                setItem(prev => [...prev, { id: ++unique, text: document.getElementById('todo').value || `list-${unique}` }])
            }
            >
            Add List
            </button>
        </p>
        </>
    );

Animation and Transition Property

Animation is use when the className is animate by css property animation and keyframe.
Transition is use when the className is animated by css property transition.
The datatypes with "*" means it is required.

PROPERTY DATATYPES DEFAULT DESCRIPTION
in boolean*   it indicates whether the children will enter or exit
children element|component *   it is the element you want to animate. to make this work in components, it is required that the component has a property assignable to className for toggling animation and if stayMountedWhenExited is true it required assignable property style to use display
className string   it is the class name that will be assigned to the children component or element
timing number|millsecond 1000 it is the timing of the animation will be transitioned
suffix {
   enter: string*,
   exit: string*
}		 {
   enter: '-in',
   exit: '-out'
}		 it is the suffix for className. basically if the className assigned is fade then when the component or element entering in. it will assign a className fade-in in the children, same way in exit. and for additional idea. suffix can be use when the enter and exit className are not uniformed ex. fade-in and slide-out. To make it happen just don't assign anything in className and assign the class names in suffix ex. { enter:"fade-in", exit:"slide-out" }
stayMountedWhenExited boolean false it is determined whether the component or element will stay mounted or unmounted from DOM when animation is exited. if it is true it will use display block and none from entering and exiting of the element
allowRef boolean false if true it will pass the animated/children node element on any event below, if the animated/children is component make sure it is React.forwardRef component. so it can get the node
onEnter function   it is invoke when the animation is started to enter
onEntering function   it is invoke when the animation is entering
onEntered function   it is invoke when the animation is fully entered
onExit function   it is invoke when the animation is started to exit
onExiting function   it is invoke when the animation is exiting
onExited function   it is invoke when the animation is fully exited
onMounted function   it is invoke when the component is mounted

useScrollPosition Usage

It is use to determine the scroll position specially when spying elements.
Edit myt-react-snippets-usescrollposition 

function Callback({ current, previous}, { isScrollDown, isScrollUp, isInitial, main, screen, defaultSpy}) {
    // make your own algorithm using the provided 
    ...
}

or use defaultSpy for "ready to use" algorithm

function Callback(positions, {defaultSpy, ...provided} ) {

    const initial = {
        target: document.getElementById("target"), // or you can use hooks like React.useRef() to get the element
        extra_top: 100, // the added extra_top to enter the target scrolltop early
        onEntered: () => {
            ...Do something when entered the target scroll top
        },
        onExited: () => {
            ...Do something when exited the target scroll top
        }
    }

    defaultSpy(initial, positions, provided)

}

useScrollPossition(Callback, scrolled)

useScrollPossition Parameters

PROPERTY DATATYPES DEFAULT DESCRIPTION
Callback function   it is the current position of the scroll top
scrolled element|string window it is the element to be assigned onscroll, you can assign css styled selector ex. #section-scroll

Callback First Argument Properties

PROPERTY DATATYPES PROVIDE DESCRIPTION
current object { x: number, y: number} it is the current position of the scroll top
previous object { x: number, y: number} it is the previous position of the scroll top

Callback Second Argument Properties

PROPERTY DATATYPES PROVIDE DESCRIPTION
isScrollDown boolean true|false it is to determine if the user is scrolling downward
isScrollUp boolean true|false it is to determine if the user is scrolling upward
isInitial boolean true|false it is the initial state when the user is not scrolling yet
main element element it is the element being scrolled
screen object { innerHeight, innerWidth} it is the dimension of the screen
defaultSpy function function it is a "ready to use" algorithm which is provided for spying the target elements, it is up to you if you want to use this algorithm or make your own

License

MIT Licensed. Copyright (c) fernando tabamo jr(Mytabworks) 2020.