Using react-share with react-image-lightbox

Question

I've taken over a React project and am fumbling incorporating react-share with react-image-lightbox. I'm pretty unfamiliar with React and Typescript all together so any insight is much appreciated.

Here's the relevant snippets:

import {
  FacebookShareButton,
  GooglePlusShareButton,
  LinkedinShareButton,
  TwitterShareButton,
  EmailShareButton,
} from 'react-share'

const Lightbox = require('react-image-lightbox')

render() {

    return(
       <Lightbox
         ...
         toolbarButtons={['Facebook share button?', 'Twitter share button?']}
         ...
         onCloseRequest={this.handleCloseViewer}
         onMovePrevRequest={this.handleViewPrev}
         onMoveNextRequest={this.handleViewNext}
       />
     )
 }

Answer 1

SOLVED: Here's the working snippets.

import {
  FacebookShareButton,
  GooglePlusShareButton,
  LinkedinShareButton,
  TwitterShareButton,
  EmailShareButton,
  FacebookIcon,
  TwitterIcon,
  PinterestIcon,
  EmailIcon
} from 'react-share'


const Lightbox = require('react-image-lightbox')

render() {

    return(
       <Lightbox
         ...
         toolbarButtons={[
              <FacebookShareButton url={window.location.href} children={<FacebookIcon size={32} round={true} />} />,
              <TwitterShareButton url={window.location.href} children={<TwitterIcon size={32} round={true} />} />,
              <PinterestShareButton url={window.location.href} children={<PinterestIcon size={32} round={true} />} />,
              <EmailShareButton url={window.location.href} children={<EmailIcon size={32} round={true} />} />
           ]}
         ...
         onCloseRequest={this.handleCloseViewer}
         onMovePrevRequest={this.handleViewPrev}
         onMoveNextRequest={this.handleViewNext}
       />
     )
 }