I am using Web Share API in ReactJS. When I set all 4 Props - title, text, url, files, it is sharing url + files only. text is not sending. I am using Tailwind CSS with it. I tried sharing in Whatsapp, Twitter, Telegram and Facebook. In all places it sending url + files except Facebook. In Facebook it is sending only files. I tried in Android Chrome. How to fix this ?
import React from 'react'
import Image from '../assests/Image1.jpg'
const ShareFiles = () => {
const handleShare = async () => {
console.log("Share button clicked!")
// Load the image and convert it to a Blob
const response = await fetch(Image);
const blob = await response.blob();
const files = [
new File([blob], 'Image1.jpg', { type: 'image/jpeg' }),
]
const shareData = {
title: "Web Share API",
text: "Web Share API in ReactJS Example in Github",
url: "https://github.com/ritwik-satpati/web-share-api-in-reactjs",
files: files,
}
await navigator.share(shareData)
}
return (
<div className='h-[100vh] w-full flex items-center justify-center'>
<div className='h-[40px] min-w-[50px] flex items-center justify-center space-x-2 border border-blue-600 text-blue-600 hover:text-white hover:bg-blue-600 font-Roboto text-center cursor-pointer py-2 px-5 rounded-sm' onClick={handleShare}>
Share
</div>
</div>
)
}
export default ShareFiles
This is the code of ShareFiles.jsx, which is used as a components inside App.js Github Repo: https://github.com/ritwik-satpati/web-share-api-in-reactjs/
Want to share text + url +files (one image file) all together in everyplace.