StMotorSpark’s gists

StMotorSpark / useMergeHook.js

Created May 21, 2020 00:33

	function useMergeState(initialState) {
	const [state, setState] = useState(initialState);
	// use useRef to improve functionality when calling the setState asynchronously
	const stateRef = useRef(state);

	function setRefState(newState) {
	stateRef.current = newState;
	return setState(newState);
	}

StMotorSpark / SplitHookObjectReturnExample.js

Last active May 21, 2020 21:04

	function useDataHook() {
	const [dataState, setDataState] = useState({
	serverData: {},
	selections: {}
	});

	return dataState;
	}

	function useDisplayHook() {

StMotorSpark / HookObjectReturnExample.js

Last active May 21, 2020 20:56

	function useBasicHook() {
	const [dataState, setDataState] = useState({
	serverData: {},
	selections: {}
	});
	const [viewState, setViewState] = useState({
	menuExpanded: false,
	submitFormData: {}
	})

StMotorSpark / HookArrayReturnExample.js

Last active May 21, 2020 20:53

	function useBasicHook() {
	const [dataState, setDataState] = useState({
	serverData: {},
	selections: {}
	});
	const [viewState, setViewState] = useState({
	menuExpanded: false,
	submitFormData: {}
	})

StMotorSpark / ReactHooksAnimate_animationcomp5.js

Created April 9, 2020 13:46

Adding additional key logic to the animation component to smooth out animations

	function useAnimationState(children){
	const [animatedItems, setItems] = useState(null);
	const itemRef = useRef(animatedItems)
	const setAnimatedItems = (newState)=>{
	itemRef.current = newState;
	return setItems(newState);
	}
	const priorItem = useRef();

	function animationEnd(){

StMotorSpark / ReactHooksAnimate_basicApp2.js

Created April 9, 2020 13:44

Adding keys to the main component to smooth out animations

	function MainDisplay(props){
	const [cardPos, setCardPos] = useState(0);

	var currentCard = <CardDisplay title={props.cards[cardPos].title} text={props.cards[cardPos].text} key={cardPos}/>;

	var nextButton = <button onClick={(event)=>{
	var nextPos = cardPos + 1;
	if(nextPos >= props.cards.length){
	nextPos = 0;
	}

StMotorSpark / ReactHooksAnimate_animationcomp4.js

Created April 9, 2020 13:42

Adding the fade in css logic to the animation component

	function useAnimationState(children){
	const [animatedItems, setItems] = useState(null);
	const itemRef = useRef(animatedItems)
	var refUpdateProxy = {
	apply: (target, thisArg, argumentsList) =>{
	itemRef.current = argumentsList[0];
	return Reflect.apply(target, thisArg, argumentsList);
	}
	}
	const setAnimatedItems = new Proxy(setItems, refUpdateProxy)

StMotorSpark / animateStyle3.css

Created April 9, 2020 13:41

Adding in the fade in animation keyframes

StMotorSpark / ReactHooksAnimate_animationcomp3.js

Created April 9, 2020 13:37

Updating the animation component to use the renders and cleanup after.

	function useAnimationState(children){
	const [animatedItems, setItems] = useState(null);

	function animationEnd(){
	// update the animatedItems to remove the first item
	setAnimatedItems(itemRef.current.slice(1));
	}

	useEffect(()=>{
	if(animatedItems == null){

StMotorSpark / animateStyle2.css

Created April 9, 2020 13:36

Adding in the keyframe animations

Ben Simons StMotorSpark