Skip to content

Dot

Example of dot animation

For the animation of appearance and hiding, it is correct not to delete an element from DOM, but to pass the hidden value.

tsx
import React from 'react';
import NotificationM from 'intergalactic/icon/Notification/m';
import Button from 'intergalactic/button';
import Dot from 'intergalactic/dot';

const Demo = () => {
  const [dotVisible, setDotVisible] = React.useState(true);

  React.useEffect(() => {
    if (dotVisible) return;
    const timeoutId = setTimeout(() => setDotVisible(true), 3000);
    return () => clearTimeout(timeoutId);
  }, [dotVisible]);
  const handleClick = React.useCallback(() => setDotVisible(false), []);

  return (
    <Button onClick={handleClick} aria-label='Read notifications'>
      <NotificationM />
      <Dot up hidden={!dotVisible} size='l' aria-label='You have notifications to read' />
    </Button>
  );
};

export default Demo;
import React from 'react';
import NotificationM from 'intergalactic/icon/Notification/m';
import Button from 'intergalactic/button';
import Dot from 'intergalactic/dot';

const Demo = () => {
  const [dotVisible, setDotVisible] = React.useState(true);

  React.useEffect(() => {
    if (dotVisible) return;
    const timeoutId = setTimeout(() => setDotVisible(true), 3000);
    return () => clearTimeout(timeoutId);
  }, [dotVisible]);
  const handleClick = React.useCallback(() => setDotVisible(false), []);

  return (
    <Button onClick={handleClick} aria-label='Read notifications'>
      <NotificationM />
      <Dot up hidden={!dotVisible} size='l' aria-label='You have notifications to read' />
    </Button>
  );
};

export default Demo;

Released under the MIT License.

Released under the MIT License.