How to use React Share with Prop-Passer

Steadylearner /about page with share at mobile device

In this post, I want to share with you how to use React-Share 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 Prop-Passer. 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 the previous post 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 Steadylearner

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

For real examples, you may visit Steadylearner 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 Steadylearner

Our goal is to turn example from the previous 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 Steadylearner

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 Codesandbox.

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

YouTube Heart Image made with CSS, Python and ImageMagik by Steadylearner

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 Prop-Passer .

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 Steadylearner. 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 LinkedIn or Twitter. I am also the writer of React Package prop-passer
2. I am the author of www.steadylearner.com 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.