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

This is not the right way to ask questions on stackoverflow , You need to provide the code and show us what you have done so far to make it work. You cannot just expect us to guess your problem and give a solution — Thanveer Shah, Dec 07 '19 at 21:12
I am very sorry, I was new in this and didn't get exactly the rule. I didn't include the code because I thought this question is less about the error in the code, and more about wether there is a way to do a certain thing in general. I didn't mean to waste people's time to ask unclear questions. So now I edit the post, and hope this is more acceptable to the community. Again apologize. — yuki, Dec 08 '19 at 19:30

score 11 · Accepted Answer · answered Dec 09 '19 at 13:11

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>

score 1 · Answer 2 · edited Apr 24 '22 at 00:48

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']}
        />
    </>
)

React share contents on social media

2 Answers2