Package Exports

myt-react-snippets

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (myt-react-snippets) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

myt-react-snippets

This is a module which is build from the ground up to solve the problems in animation, transition, scrollpossitions, etc... it has no extra dependencies which can be a little less.

Installation
How To Use
Animation and Transition Properties
useScrollPosition Properties
License

installation

npm i myt-react-snippets

yarn add myt-react-snippets

How to use

import to your project

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

Animation Usage

Animation is use when the className is animate by css property animation and keyframe.

/*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 [show, setShow] = React.useState(false)
const [btn, setBtn] = React.useState(true)
const clickHandler = e => {
    setShow(!show)
}

return (
    <>
        { btn && <button type="button" onClick={clickHandler}>Show</button>}
        <Animation in={show} className="fade" onEnter={() => setBtn(false)} onExited={() => setBtn(true)}>
            <div style={padding:"20px", backgroundColor: "crimson"}>
                Hello I've Shown. click this -> <span onClick={clickHandler}>Close</span>
            </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 [show, setShow] = React.useState(false)
const [btn, setBtn] = React.useState(true)
const clickHandler = e => {
    setShow(!show)
}

return (
    <>
        { btn && <button type="button" onClick={clickHandler}>Show</button>}
        <Transition in={show} className="fade" onEnter={() => setBtn(false)} onExited={() => setBtn(true)}>
            <div style={padding: "20px", backgroundColor: "crimson"}>
                Hello I've Shown, click this -> <span onClick={clickHandler}>Close</span>
            </div>
        </Transition>
    </>
)

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 if 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 will be assigned as children has a property className that is assignable
className	string *		it is the class name the will be assigned to the children component or element
timing	number	millsecond	1000
prefix	{ enter: string, exit: string }	{ enter: 'in', exit: 'out' }	it is the prefix for className. basically if the className assigned is `fade` then the when entering it will assign a className `fade-in` in the children, same way in exit. and for additional idea. prefix can be use when the enter and exit className are not uniformed like `fade-in` and `slide-out`. just don't assign anything in className and assign the class names in prefix `{enter:"fade-in", exit:"slide-out"}`
mounted	boolean	true	it is determined whether the component or element will be unmounted from DOM when `in` is `false`, or just stayed mounted and use `display` `block` and `none` from entering and exiting
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

useScrollPosition Usage

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

useScrollPossition Arguments

It is use to determine the scroll position specially when spying elements.
The datatypes with "*" means it is required.

PARAMETER	DATATYPES	DEFAULT	DESCRIPTION
1st parameter	function*		it is the one the will update the current location
2nd parameter	string\|element	window	it is the element to be assigned onscroll

1st parameter arguments

ARGUMENT	DATATYPES	VALUE	DESCRIPTION
1st argument	object	{ current: { x: number, y: number } previous: { x: number, y: number } }	current position and previous position, previous is one step behind
2nd argument	object	{ isInitial, isScrollDown, isScollUp, screen, main, defaultSpy }	it contain the additional utilities that will be helpful