Share component to render ShareNative (using web share api) or ShareLinks (with the specific links)

main-component-share.js

import React, { useState, useEffect } from 'react'

import ShareNative from '../ShareNative'
import ShareLinks from '../ShareLinks'

import * as S from './styled';

const hasShareNative = () => {
    if (typeof navigator !== `undefined`) {
        if (navigator.share) {
            console.log('suporta o share navigator')
            return true
        }
        return false
        console.log('nao suporta o share navigator')
    }
    console.log('nao tem navigator')
    return false
  }

const Share = () => (
    <S.ShareWrapper>
        <S.ShareDescription>Compartilhe:</S.ShareDescription>
        { hasShareNative() ? <ShareNative/> : <ShareLinks/>}
    </S.ShareWrapper>
)

export default Share;

share-links.js

import React from 'react'

import Icons from './Icons'

import * as S from './styled';

// This variable is acctualy in another separeted file on the real code
const links = [
    {
        label: 'Twitter',
        url: 'http://twitter.com/share?text=Blog Talita Oliveira - &url=http://blog.talitaoliveira.com.br/'
    },
    {
        label: 'Linkedin',
        url: 'https://www.linkedin.com/sharing/share-offsite/?url=http://blog.talitaoliveira.com.br/&title=TalitaOliveira'
    },
    {
        label: 'Facebook',
        url: 'http://www.facebook.com/sharer.php?u=http://blog.talitaoliveira.com.br/&title=TalitaOliveira'
    }
]

const ShareLinks = () => (
    <S.ShareLinksContainer>
        <S.ShareLinksList>
            {links.map((link, i) => {
                const Icon = Icons[link.label];

                return (
                    <S.ShareLinksItem key={i}>
                        <S.ShareLinksLink href={link.url} title={link.label} target="_blank" rel="noopener noreferrer">
                            <S.IconWrapper>
                                <Icon />
                            </S.IconWrapper>
                        </S.ShareLinksLink>
                    </S.ShareLinksItem>
                )
            })}
        </S.ShareLinksList>
    </S.ShareLinksContainer>
)

export default ShareLinks;

share-native.js

import React from 'react'

import * as S from './styled';

const handleClick = () => {
    if (navigator.share) {
        navigator.share({
          title: 'Talita Oliveira',
          text: 'Blog - Talita Oliveira',
          url: 'https://blog.talitaoliveira.com.br/',
        })
          .then(() => console.log('Successful share'))
          .catch((error) => console.log('Error sharing', error));
      }
  }

const ShareNative = () => (
    <S.ShareIcon onClick={handleClick}></S.ShareIcon>
)

export default ShareNative;