Disclosure

A simple, accessible foundation for building custom UIs that show and hide content, like togglable accordion panels.

@peduarte starred 3 repositories

@headlessui/react

Usage

<Disclosure>
  <DisclosureButton>Disclosure Button</DisclosureButton>
  <DisclosurePanel>Disclosure Panel</DisclosurePanel>
</Disclosure>

Props

Docs API Reference

Animate UI props

DisclosurePanel

Prop	Type	Default
`transition?`	`Transition`	`{ type: 'spring', stiffness: 150, damping: 22 }`

The choice made is the same as Headless UI, i.e. to remove the element from the DOM for accessibility and performance reasons. However, this may pose a problem for SEO. If you want your Disclosure content to be taken into account by Google, please replace the DisclosurePanel component with:

components/animate-ui/headless-disclosure.tsx

const DisclosurePanel = React.forwardRef<HTMLDivElement, DisclosurePanelProps>(
  (
    {
      className,
      children,
      transition = { type: 'spring', stiffness: 150, damping: 17 },
      as = React.Fragment,
      ...props
    },
    ref,
  ) => {
    const { isOpen } = useDisclosure();
 
    return (
      <DisclosurePanelPrimitive static as={as} {...props}>
        {(bag) => (
          <motion.div
            initial={false}
            animate={
              isOpen
                ? { height: 'auto', opacity: 1, '--mask-stop': '100%' }
                : { height: 0, opacity: 0, '--mask-stop': '0%' }
            }
            transition={transition}
            style={{
              maskImage:
                'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',
              WebkitMaskImage:
                'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',
            }}
            className={cn('overflow-hidden', className)}
            ref={ref}
          >
            {typeof children === 'function' ? children(bag) : children}
          </motion.div>
        )}
      </DisclosurePanelPrimitive>
    );
  },
);

Credits

We use Headless UI for the disclosure component.