use-delayed-hidden

Since: ver.9.4.0 Adds a delay between toggling the `hidden` attribute and the `--active` modifier. 250ms is the default transition time for honeycomb animations. If the two props are set at the same time, the CSS transition doesn't happen.

Usually, to add an transition animation between hidden states you need to add a transition between the CSS modifier that triggers the animation and the property the effectively hides the component (e.g.: hidden attribute or display: none style), otherwise the transition does not work.

You can use this hook to handle the delayed toggle of said attributes and modifiers.

The returned value is an array of exactly 2 booleans with the respective values: [hidden, activeModifier].

The box bellow has an opacity transition that is only noticeable because of the delay between the toggle of the attributes.

<style>
  .my-custom-box {
    opacity: 0;
    transition: opacity 300ms ease-in-out;
  }

  .my-custom-box.active {
    opacity: 1;
  }
</style>

import { Grid, GridCol, Divider, Button, Box, useDelayedHidden } from '@flixbus/honeycomb-react';

const [active, setActive] = React.useState(false);
const [hidden, activeModifier] = useDelayedHidden(active);

<>
  <Button appearance={active ? 'primary' : undefined} onClick={() => setActive(!active)}>Toggle box</Button>
  <Grid>
    <GridCol><Box appearance="success" extraClasses={`my-custom-box ${activeModifier ? 'active' : ''}`} hidden={hidden}>Animated box</Box></GridCol>
    <GridCol><Box appearance="success" extraClasses={`my-custom-box ${active ? 'active' : ''}`} hidden={!active}>Dull box</Box></GridCol>
  </Grid>
</>
import { Grid, GridCol, Divider, Button, Box, useDelayedHidden } from '@flixbus/honeycomb-react';

const [active, setActive] = React.useState(false);
const [hidden, activeModifier] = useDelayedHidden(active);

<>
  <Button appearance={active ? 'primary' : undefined} onClick={() => setActive(!active)}>Toggle box</Button>
  <Grid>
    <GridCol><Box appearance="success" extraClasses={`my-custom-box ${activeModifier ? 'active' : ''}`} hidden={hidden}>Animated box</Box></GridCol>
    <GridCol><Box appearance="success" extraClasses={`my-custom-box ${active ? 'active' : ''}`} hidden={!active}>Dull box</Box></GridCol>
  </Grid>
</>