I have a Share Icon that looks like:
I'm looking to display the first 5 icons, with the 5th icon being the share icon. The remaining icons should appear below the share icon and expand to the right when someone taps or hovers over it (either tap or hover as I'm uncertain of the best UX approach in this scenario).
SocialShare.jsx
import React from 'react';
import { motion } from 'framer-motion';
import { ShareIcon } from '@heroicons/react/solid';
import {
Facebook,
HackerNews,
Reddit,
Twitter,
LinkedIn,
Pinterest,
Telegram,
Whatsapp,
Pocket
} from '../icons/index';
const isProduction = process.env.NODE_ENV === 'production';
export const SocialShare = ({ title, slug }) => {
const [share, openShare] = React.useState(false);
const [host, setHost] = React.useState('');
React.useEffect(() => {
setHost(window.location.host);
}, []);
const url = `${isProduction ? 'https://' : 'http://'}${host}/${slug}`;
const text = title + url;
const via = 'deadcoder0904';
const sharer = {
facebook: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
twitter: `https://twitter.com/intent/tweet?url=${url}&text=${text}&via=${via}`,
reddit: `https://www.reddit.com/submit?title=${title}&url=${url}`,
hackernews: `https://news.ycombinator.com/submitlink?u=${url}&t=${title}`,
linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
pinterest: `https://pinterest.com/pin/create/button/?url=${url}&description=${title}`,
telegram: `https://telegram.me/share/url?url=${url}&text=${text}`,
whatsapp: `https://wa.me/?text=${title}%0D%0A${url}%0D%0A%0D%0A${text}`,
pocket: `https://getpocket.com/edit.php?url=${url}`
};
const variants = {
hidden: {
opacity: 0,
translateX: -16
},
visible: {
opacity: 1,
translateX: 0
}
};
return (
<ul className="flex items-center mt-8 space-x-4">
<li>
<a className="" href={sharer.facebook} title="Share on Facebook">
<Facebook />
</a>
</li>
<li>
<a className="" href={sharer.twitter} title="Share on Twitter">
<Twitter />
</a>
</li>
<li>
<a className="" href={sharer.reddit} title="Share on Reddit">
<Reddit />
</a>
</li>
<li>
<a className="" href={sharer.hackernews} title="Share on Hacker News">
<HackerNews />
</a>
</li>
<motion.li className="cursor-pointer" whileHover={{}}>
<ShareIcon
className="w-6 h-6 text-gray-300"
onClick={() => {
openShare(!share);
}}
/>
</motion.li>
<motion.li
className=""
initial="hidden"
animate="visible"
variants={variants}
transition={{
type: 'tween',
ease: 'easeInOut'
}}
>
<a className="" href={sharer.linkedin} title="Share on LinkedIn">
<LinkedIn />
</a>
</motion.li>
<li>
<a className="" href={sharer.pinterest} title="Share on Pinterest">
<Pinterest />
</a>
</li>
<li>
<a className="" href={sharer.telegram} title="Share on Telegram">
<Telegram />
</a>
</li>
<li>
<a className="" href={sharer.whatsapp} title="Share on Whatsapp">
<Whatsapp />
</a>
</li>
<li>
<a className="" href={sharer.pocket} title="Share on Pocket">
<Pocket />
</a>
</li>
</ul>
);
};
The icons are within a flex container which makes using staggerChildren challenging. Although Stagger Children would be ideal for my requirements, Flexbox does not seem to offer a solution for this issue.
Should I consider altering the DOM elements by introducing a wrapper? However, this may disrupt the ul>li structure.
All I aim for is to have all the icons expand to the right when hovering over the share icon, and retract back underneath it upon removing the cursor. Essentially, replicating the functionality seen in https://codepen.io/romswellparian/full/mJXdqV:
The behavior should exclusively include expanding to the right, with the first four icons always visible.
A complete reproduction can be found on Stackblitz → https://stackblitz.com/edit/share-animation-framer-motion?file=components%2FSocialShare.jsx