How to use React Share with Prop-Passer

/about page with share at mobile device

In this post, I want to share with you how to use for mobile devices. Its APIs are not so difficult but it would be better to have some examples with working codes.

It will also be a opportunity for you to know how to use Passers and Key API from . Before it was made, It wasn’t funny to include examples from others that repeating the same classNames and props without many variations.

I also hope you can bring working code examples by following this post. I will use codes from How to use React Spring to animate your message for this post. You can follow the post without reading it but the code snippet will be helpful for you visually understand what happens.

If you just want working code examples, You may visit the Codesandbox at the moment and play with it.

React Spring Transition with React Share by

I hope you already visited and read the documentation before we move on. To make example simple, we will just use only serveral Social Medias.

For real examples, you may visit at your mobile device.

[Table of contents]

  1. React Share for Mobile without Prop-Passer
  2. Reduce Code volume with Passers from Prop-Passer
  3. Conclusion

1. React Share for Mobile without Prop-Passer

Animate message with React Share by

Our goal is to turn example from to image like above. It will be asy to follow if you already know how to use CSS and React.

Before editing codes for React Share, we will first make wrapper components for it. Following the structure of the Codesandbox, You may make folder with name “SubNavbar” in the same directory and write codes for index.js inside it like code snippet below.

import React from 'react'
import SubShare from '../SubShare'
function Subnavbar() {
return (<footer
className={`
height--nav
sub
fixed
width-vw
center
cursor-pointer
transition--default
box-shadow--black
`}>
<SubShare />
</footer>)
}
export default Subnavbar;// CSS(You may visit the Codesandbox and read source code)// To fix something to the bottom, use it with fixed, use it for share at mobile mode //.sub {
left: 0;
bottom: 0;
right: 0;
}
.fixed {
position: fixed;
}
// You can define height on your preference, only to make the
// height for Subnavbar and Navbar equal later
.height--nav {
height: 2.8rem;
}
// other CSS are just visual decorator and you will understand
// easily for they do just one thing at a time and please read
// source code

For viusal container is ready, we will make components with React-Share. You can make folder SubShare and make a folder with name index.js also.

// Just use two social medias to make example simple.
import React from 'react'
import {
FacebookShareButton,
TwitterShareButton,

FacebookIcon,
TwitterIcon,
} from 'react-share'
// refer the Codesandbox
import SubShareCSS from "./CSS";
function SubShare({
url = String(window.location), // to share current page
title = "Steadylearner Website",
shareImage = "https://www.steadylearner.com/static/images/brand/prop-passer.png",
size = "2.5rem",
}) {
return (
<SubShareCSS>
<li
className="network"
>

<FacebookShareButton
className="network__share-button"
url={url}
quote={title}
>
<FacebookIcon
size={size}
/>
</FacebookShareButton>
</li>
<li
className="network"
>

<TwitterShareButton
className="network__share-button"
url={url}
title={title}
>
<TwitteIcon
size={size}
/>
</TwitterShareButton>
</li>
</SubShareCSS>
)
}

If you already read the documentation of React-Share, You should have noticed that the same part of code snippets are repeating themselves.

It may be not funny to import those code snippets inside your project. For they take up much space innecessarily.

So in the next process we will use Passers api from Prop-Passer to reduce code size and not to repeat code also.

2. Reduce Code volume with Passers from Prop-Passer

/Prop-Passer Image by

We saw duplciate parts in the above code snippet. Let’s remove it with Passers API from Prop-Passer.

import React from 'react'
improt { Passers } from 'prop-passer'
import {
FacebookShareButton,
TwitterShareButton,

FacebookIcon,
TwitterIcon,
} from 'react-share'
// refer the Codesandbox
import SubShareCSS from "./CSS";
function SubShare({
url = String(window.location), // to share current page
title = "Steadylearner Website",
shareImage = "https://www.steadylearner.com/static/images/brand/prop-passer.png",
size = "2.5rem",
}) {
const ListPropPassers = Passers({
url,
className: "network__share-button",
})({
className: "network",
})("li");
return (
<SubShareCSS>
<ListPropPassers>
<FacebookShareButton
quote={title}
>
<FacebookIcon
size={size}
/>
</FacebookShareButton>
<TwitterShareButton
title={title}
>
<TwitteIcon
size={size}
/>
</TwitterShareButton>
<ListPropPassers>
</SubShareCSS>
)
}

I hope the difference between code snippet inside return from the code snippet before. You will see much more difference if you wanted to use more social medias for your share components or you may verify it /SubShare/index.js in .

The API is very simple for you just need to extract common parts from the existing codes and pass it inside objects. It uses native React API and you can extract wrapper components such as <li> etc as you can see in the example above.

At this point, maybe the console is showing the warning that you need keys for some react components.

You can still use key API from Prop-Passer if you want like the code snippet below.

import React from 'react'
import { key } from 'prop-passer'
<Whynotautomatic key={key()} />

It is made with just two lines of code and you don’t need crpytomatic key generator for this and use it without problem.

3. Conclusion

made with CSS, Python and ImageMagik by

The post doesn’t explain much for programming concepts and CSS etc. I hope that this post helped you get the practical example of React-Share. You may also have found that there are still chance to reduce your code volume with .

If you followed the previous post, You already know the major APIs of Prop-Passer and I want to you to include if in your project if you find it useful.

This was the part of my attempt to make better documentation for the package and . For the site, I still have to solve the problem of metadata and optimization for search engine etc for there is no much information how to do that with React-Rust Web Application.

The next post will be about how to make sitemap with some React Relevant packages. After that I am planning to write more about Rust. For example, reading title of blog posts and turn it into sitemap format to help search engines.

Thanks and please share this post with others.

p.s

  1. Did you like my coding style? Please, send messages via or . I am also the writer of
  2. I am the author of and it is mobile friendly also. You may visit it.

I am not a native English speaker. When some words don’t make sense, grammar problems etc. Please leave a comment below. I will read this post again and edit them right away.

--

--

--

Visit www.steadylearner.com/blog for more contents. Contact me with https://www.linkedin.com/in/steady-learner-3151b7164 for job offers.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to (Part 3): Swap Registration Flow to a Phoenix Live View With phx_gen_auth — Add a Phone…

Let’s Build a Web App with Vue, Chart.js and an API Part II

Angular Offline Capability: Service Worker And PWA

How to hide and show a tab in Dynamics 365 based on a field value

Selection Sort (javascript)

Algorithms 101: best time to buy and sell stock in JavaScript

How to center elements in CSS?

Algorithms 101: Happy Number in JavaScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Steadylearner

Steadylearner

Visit for more contents. Contact me with for job offers.

More from Medium

A quick guide for passing props using navigation and UseLocation hook in react-router-dom

Importance of Fragments in Optimising React Applications

Getting started with Webpack: An Introduction

About my newly learned technology (Redux toolkit)