React share contents on social media

Question

Dear stack over flow community. I am building a react app using create react app where I will show a random joke fetched from an external API.

Here is the code for react component

   import React from "react"
   function Home(props) {
        return (
            <div>
                <h2>{props.joke.setup}</h2>
                    <h3>{props.joke.punchline}</h3>
            </div>
        )
    }

I want to include a share functionality to share the current joke on social media. I tried react-share package, but the share button used in there only allows to pass a url. Which in my case will be the base url of my app, and could not include the current joke that I am displaying.

    import { FacebookShareButton, FacebookIcon } from "react-share"
    <FacebookShareButton url="#">
        <FacebookIcon logoFillColor="white" />
    </FacebookShareButton>

How could I include a share button that shares the content of react components, values of state or props rather than just url? For example a share button like the above but has additional props that I can pass content in, props.joke.setup, props.joke.punchline Thank you very much

Answer 1

I have found a way myself. Sorry I should have read the documentation of react-share package better. There is optional props that you can pass to the share button. So I did this.

<FacebookShareButton
    url="someurl"
    quote={props.joke.setup + props.joke.punchline}
    hashtag="#programing joke">
    <FacebookIcon logoFillColor="white" />
</FacebookShareButton>

Answer 2

You Can Also Use Share Social just use below code

const style = {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    borderRadius: 3,
    border: 0,
    color: 'white',
    padding: '0 30px',
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
};

console.log(currentPlaylist._id);

return (
    <>
        <ShareSocial 
            style={style}
            url ={currentPlaylist._id}
            socialTypes={['facebook','twitter','reddit','linkedin','email','pinterest']}
        />
    </>
)