I delivered effective production to 4+ companies, from startups to Fortune 500s, with a focus on development Web/Mobile project.
Streamlining Fade-In Animations in React UI Development
IntroductionFade-in animations can significantly enhance the user experience by introducing elements gracefully into the UI. In React development, creating reusable components can streamline the process and maintain code consistency across a project. In this article, we'll explore a concise method using React, Framer Motion, and Intersection Observer to achieve a reusable fade-in animation component.Code BreakdownThe FadeIn component is designed to animate its children by fading them in ...
Streamlining Fade-In Animations in React UI Development
IntroductionFade-in animations can significantly enhance the user experience by introducing elements gracefully into the UI. In React development, creating reusable components can streamline the process and maintain code consistency across a project. In this article, we'll explore a concise method using React, Framer Motion, and Intersection Observer to achieve a reusable fade-in animation component.Code BreakdownThe FadeIn component is designed to animate its children by fading them in ...
Hook Pulse Effect (2)
This is second part for the pulse EffectButton CSS/* Pulse Effect */ .pulse__effect { animation: pulse-effect 1s ease-out; } @keyframes pulse-effect { 0% { opacity: 0.2; height: 0px; width: 0px; } 100% { opacity: 0; height: 400px; width: 400px; } } Usageimport { FC, LegacyRef, ReactNode, useRef } from "react" import usePulseEffect from "./usePulseEffect" interface ButtonProps { id: string refP?: Element children?: ReactNode className?: string type?: "button" | "submit" | "reset" | undefined p...
Hook Pulse Effect (2)
This is second part for the pulse EffectButton CSS/* Pulse Effect */ .pulse__effect { animation: pulse-effect 1s ease-out; } @keyframes pulse-effect { 0% { opacity: 0.2; height: 0px; width: 0px; } 100% { opacity: 0; height: 400px; width: 400px; } } Usageimport { FC, LegacyRef, ReactNode, useRef } from "react" import usePulseEffect from "./usePulseEffect" interface ButtonProps { id: string refP?: Element children?: ReactNode className?: string type?: "button" | "submit" | "reset" | undefined p...
Hook Pulse Effect(1)
/* eslint-disable-next-line no-param-reassign */ import React, { useEffect } from "react" import styles from "./Button.module.css" interface Props { ref?: React.RefObject<HTMLButtonElement> pulseRef?: React.RefObject<HTMLDivElement> pulseColor?: string } const usePulseEffect = ({ ref, pulseRef, pulseColor }: Props) => { useEffect(() => { const handleMouseClick = async (event: any) => { pulseRef.current.classList.remove(styles.pulse__effect) const posX = event?.clientX const posY = e...
Hook Pulse Effect(1)
/* eslint-disable-next-line no-param-reassign */ import React, { useEffect } from "react" import styles from "./Button.module.css" interface Props { ref?: React.RefObject<HTMLButtonElement> pulseRef?: React.RefObject<HTMLDivElement> pulseColor?: string } const usePulseEffect = ({ ref, pulseRef, pulseColor }: Props) => { useEffect(() => { const handleMouseClick = async (event: any) => { pulseRef.current.classList.remove(styles.pulse__effect) const posX = event?.clientX const posY = e...
ERC721 Mint by Crossmint
React Componentimport { CrossmintPayButton } from "@crossmint/client-sdk-react-ui" import { FC } from "react" export const ERC6551_REGISTRY_ADDRESS = "0x02101dfB77FDE026414827Fdc604ddAF224F0921" export const ERC6551_IMPLEMENTATION_ADDRESS = "0x2d25602551487c3f3354dd80d76d54383a243358" export const ERC6551_INIT_DATA = "0x8129fc1c" interface CrossmintButtonProps { wallet: string quantity: number } const CrossmintButton: FC<CrossmintButtonProps> = ({ wallet, quantity }) => { const { referra...
ERC721 Mint by Crossmint
React Componentimport { CrossmintPayButton } from "@crossmint/client-sdk-react-ui" import { FC } from "react" export const ERC6551_REGISTRY_ADDRESS = "0x02101dfB77FDE026414827Fdc604ddAF224F0921" export const ERC6551_IMPLEMENTATION_ADDRESS = "0x2d25602551487c3f3354dd80d76d54383a243358" export const ERC6551_INIT_DATA = "0x8129fc1c" interface CrossmintButtonProps { wallet: string quantity: number } const CrossmintButton: FC<CrossmintButtonProps> = ({ wallet, quantity }) => { const { referra...
