🚧 Landing pages building blocks https://landing-blocks.now.sh
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

34 lines
945 B

import { useColorMode } from '@chakra-ui/react'
import { Faded } from 'baby-i-am-faded'
// import { Faded, FadedProps } from 'baby-i-am-faded'
import React, { ComponentType, ElementType, useMemo } from 'react'
import 'intersection-observer'
export function useFaded({
animate = undefined,
triggerOnce = true,
...rest
}): { Faded: ElementType } {
const component: ComponentType = useMemo(() => {
const defaultProps = {
cascade: true,
threshold: 0.1,
duration: 400,
triggerOnce,
children: [],
}
return (props) => {
return <Faded {...defaultProps} {...props} />
}
}, [animate, triggerOnce])
return { Faded: animate ? component : 'div' }
}
export function useMyColorMode({ dark = false }) {
const { colorMode } = useColorMode()
if (dark) {
return { colorMode: 'dark' }
}
return { colorMode }
}