Building Whinst Part 23: Adding link and social media sharing functionality

An essential part of the Whinst web app is the ability for users to share catalogs they have created. Once a catalog is created a user can simply copy it's link or share it directly to their social media apps. In this article, I talk about how I added functionality that allows users to share their catalogs.

In the Whinst web app there's two ways a user can share their catalogs, by copying the catalog link or sharing direct to their social media apps. To add link copying functionality I used the built in React navigator clipboard, which simply just copies the text given onto the clipboard. For social sharing functionality I used the free react-share package which provides social media sharing buttons. I added sharing for Twitter(X), Facebook and WhatsApp. The code below shows how this is done

import {TwitterShareButton} from "react-share"
const shareFun=()=>{
return(
//Link copying button
 <button onClick={()=>navigator.clipboard.writeText('http://a-random-link/')}>
    Copy link
 </button>

//Social media share button
<TwitterShareButton url={'http://a-random-link/'}>
        <button>
            Twitter
        </button>
 </TwitterShareButton>

)}

Some other little but essential tasks I've worked on since the last article include:

Delete conformation modal: This is just a simple pop up that appears when the user want's to delete an object. It displays text asking the user weather they are sure they want to delete the object or not.

Mandatory images/videos: When a product is added to a catalog, an image or video is required. If no image or video is uploaded the product object will not be added. To add this functionality I just used a simple if statement which checks to the see if a file has been uploaded before adding the object.

Enhancing Images: The catalog images looked a bit a stretched, to fix this I just added some properties to the Image tag, that is layout to fill and object fill to cover.

With these crucial features now added I'm a step closer to completing the Whinst web app. Thank you for reading.

Building Whinst Part 23: Adding link and social media sharing functionality

Link and social media sharing📱