Castle UI exports four components Fade, ScaleFade, Slide, and SlideFade to provide simple transitions.
Most transition components are made using framer-motion. They accept the following props:
- Common props from framer's motion elements
- in prop used to trigger the transition
- unmountOnExit prop used to unmount the component when it is not
Usage
Import
import { Fade, SlideFade, ScaleFade, Collapse } from '@passfort/castle'
Example
Chakra exports four components Fade, ScaleFade, Slide, and SlideFade to provide simple transitions.
Fade Transition
function FadeEx() {
const { isOpen, onToggle } = useDisclosure()
return (
<>
<Button label="Click" onClick={onToggle} />
<Fade in={isOpen}>
<Box
p="40px"
color="white"
mt="4"
bg="teal.500"
rounded="md"
shadow="md"
>
Fade
</Box>
</Fade>
</>
)
}
live example
ScaleFade Transition
function ScaleFadeEx() {
const { isOpen, onToggle } = useDisclosure()
return (
<>
<Button onClick={onToggle}>Click Me</Button>
<ScaleFade initialScale={0.9} in={isOpen}>
<Box
p="40px"
color="white"
mt="4"
bg="teal.500"
rounded="md"
shadow="md"
>
Fade
</Box>
</ScaleFade>
</>
)
}
live example
SlideFade transition
function SlideFadeEx() {
const { isOpen, onToggle } = useDisclosure()
return (
<>
<Button onClick={onToggle} label="Click"></Button>
<SlideFade in={isOpen} offsetY="20px">
<Box
p="40px"
color="white"
mt="4"
bg="teal.500"
rounded="md"
shadow="md"
>
Lorem
</Box>
</SlideFade>
</>
)
}
live example
Collapse Transition
function CollapseEx() {
const { isOpen, onToggle } = useDisclosure()
return (
<>
<Button onClick={onToggle}>Click Me</Button>
<Collapse in={isOpen} animateOpacity>
<Box
p="40px"
color="white"
mt="4"
bg="teal.500"
rounded="md"
shadow="md"
>
Lorem
</Box>
</Collapse>
</>
)
}
live example
Changing the starting height
function Example() {
const [show, setShow] = React.useState(false)
const handleToggle = () => setShow(!show)
return (
<>
<Collapse startingHeight={20} in={show}>
<Text>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
labore wes anderson cred nesciunt sapiente ea proident.
</Text>
</Collapse>
<Button
onClick={handleToggle}
mt="1rem"
label={`Show ${show ? 'Less' : 'More'}`}
/>
</>
)
}
live example
