myt-react-snippets v0.2.6

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
• How To Use
  • Importing
  • Animation Usage
  • Tranistion Usage
  • TranistionGroup Usage
• Animation and Transition Properties
  • useScrollPosition Usage
• useScrollPosition Properties
• License

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.

/*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.

/*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.

    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.

useScrollPosition Usage

It is use to determine the scroll position specially when spying elements.

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

Callback First Argument Properties

Callback Second Argument Properties

License

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