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'
content_copy
Copy

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>
    </>
  )
}
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>
    </>
  )
}
content_copy
Copy
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>
    </>
  )
}
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>
    </>
  )
}
content_copy
Copy
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>
    </>
  )
}
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>
    </>
  )
}
content_copy
Copy
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>
    </>
  )
}
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>
    </>
  )
}
content_copy
Copy
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'}`}/>
    </>
  )
}
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'}`}/>
    </>
  )
}
content_copy
Copy
live example