React Overlap

react-overlap is a React component that creates a hover effect where images or SVG graphics overlap each other. Use this component is to display logos or icons in a compact space that expands on hover.

Demo

https://react-overlap.on.fleek.co/

Installation

npm install react-overlap

yarn add react-overlap

Using SVG Images

import React from 'react';
import { OverlapHover, OverlapHoverSvg } from 'react-overlap';

import DiscordSvg from './img/svg/Discord.svg';
import GithubSvg from './img/svg/Github.svg';
import TwitterSvg from './img/svg/Twitter.svg';

const logoData = [
  {
    svg: GithubSvg,
    href: 'https://github.com/givepraise/praise',
    alt: 'Github',
  },
  {
    svg: DiscordSvg,
    href: 'https://discord.gg/U2ydzXBG6C',
    alt: 'Discord',
  },
  {
    svg: TwitterSvg,
    href: 'https://twitter.com/givepraise',
    alt: 'Twitter',
  },
];

const App = () => {
  return (
    <OverlapHover size={30} spacing={10} overlap={0.4} direction="left">
      {logoData.map((data, index) => (
        <OverlapHoverSvg
          key={index}
          alt={data.alt}
          href={data.href}
          className="opacity-100 hover:opacity-70" // Optional, tailwind example
          svg={data.svg}
        />
      ))}
    </OverlapHover>
  );
};

export default App;

Using PNG Images

import React from 'react';
import { OverlapHover, OverlapHoverImage } from 'react-overlap';

import DiscordPng from './img/png/Discord.png';
import GithubPng from './img/png/Github.png';
import TwitterPng from './img/png/Twitter.png';

const logoData = [
  {
    img: GithubPng,
    href: 'https://github.com/givepraise/praise',
    alt: 'Github',
  },
  {
    img: DiscordPng,
    href: 'https://discord.gg/U2ydzXBG6C',
    alt: 'Discord',
  },
  {
    img: TwitterPng,
    href: 'https://twitter.com/givepraise',
    alt: 'Twitter',
  },
];

const App = () => {
  return (
    <OverlapHover size={30} spacing={10} overlap={0.4} direction="right">
      {logoData.map((data, index) => (
        <OverlapHoverImage
          key={index}
          alt={data.alt}
          href={data.href}
          className="opacity-100 hover:opacity-70" // Optional, tailwind example
          src={data.img}
        />
      ))}
    </OverlapHover>
  );
};

export default App;

Animation direction

To change the direction of the animation, pass the direction prop with either "left" or "right" (default is "right").

<OverlapHover direction="left">
  // Your OverlapHoverImage or OverlapHoverSvg components
</OverlapHover>

Dark Mode

The OverlapHover component supports dark mode, which can be enabled by setting the darkMode prop to true. When dark mode is enabled, the component will invert the colors of the images or SVGs to provide better contrast and visibility against a dark background.

To enable dark mode, simply pass the darkMode prop to the OverlapHover component:

<OverlapHover darkMode={true}>
  // Your OverlapHoverImage or OverlapHoverSvg components
</OverlapHover>

OverlapHover Props

Prop	Type	Default	Description
direction	string	"right"	The direction of the animation on hover. Can be "left" or "right"
size	number	25	The size of the images or SVGs in pixels
spacing	number	16	The spacing between images or SVGs in pixels
overlap	number	0.33	The overlap percentage
darkMode	bool	false	Whether to enable dark mode or not. By default, darkmode inverts the colours of the images.

License

MIT