Jumat, 10 February 2023

Tombol Share Dengan React

Dalam artikel ini kita akan belajar bagaimana membuat tombol share pada artikel-artikel atau produk-produk tang kita telah buat.

React

Daftar Isi

Dalam artikel ini kita akan belajar bagaimana membuat tombol share pada artikel-artikel atau produk-produk tang kita telah buat.

Pertama sekali yang mesti Anda ketahui, bahwa semua ini bisa dibuat secara manual, seperti misalnya kita sediakan url dan juga icon nya. Namun, jika ada package yang bisa membantu kita untuk hal sekecil ini kenapa tidak.

Disini saya akan kenalkan kepada Anda package yang sering saya pakai jika berhubungan dengan yang namanya share button.

React Share

Jadi package ini akan mempermudah kita dalam membuat share button seperti share ke facebook, twitter, telegram, line dan banyak lagi.

Selain dia memberikan icon kepada kita, dia juga sudah membuat api untuk membuat share tersebut agar kita tidak sulit mengkonfigurasinya.

Instal React Share

Saya akan menganggap bahwa Anda sudah mempunyai react project, entah itu CRA, Inertia-react, Next.js atau pun Remix. Karena package ini tidak akan peduli Anda menggunakan apa, yang penting dia akan stand under react.

Buka terminal Anda, dan silakan install package dengan menjalan perintah tersebut.

npm i react-share

Jika Anda menggunakan yarn, silakan jalankan perintah berikut:

yarn add react-share

Setelah itu, kita akan langsung lihat bagaimana cara menggunakannya.

Cara Penggunaan

Biasa yang saya lakukan adalah membuat 1 komponen yang terkusus kepada apa yang ingin kita share, seperti contoh. Disini saya akan menganggap bahwa Anda ingin membagikan artikel yang telah ditulis. Maka untuk itu, saya akan membuat 1 komponen dengan nama ArticleShare.tsx. Kemudian, Anda bisa tuliskan kode berikut.

Jika Anda sedang tidak menggunakan typescript, atau mungkin file yang Anda gunakan saat ini adalah .jsx, itu sama sekali tidak ada masalah.

import { FacebookIcon, FacebookShareButton } from 'react-share';
import useTypedPage from '@/Hooks/useTypedPage';
import { ArticleSingleProps } from '@/types';
import useRoute from '@/Hooks/useRoute';

export default function ArticleShare() {
    const { article, clara } = useTypedPage<{ article: ArticleSingleProps }>().props;
    const route = useRoute();
    return (
        <div className='mb-8 '>
            <h4 className='mb-2 text-slate-500'>Share</h4>

            <div className='flex items-center gap-2 [&>button>svg]:h-8 [&>button>svg]:w-8 [&>button>svg]:rounded-lg'>
                <FacebookShareButton
                    url={route('articles.show', [article])}
                    quote={article.excerpt}
                    hashtag={article.tags.map((tag) => tag.name).join(', ')}>
                    <FacebookIcon />
                </FacebookShareButton>
            </div>
        </div>
    );
}

Kode di atas, itu terkusus untuk facebook saja, namun Anda harus perhatikan disini. Bahwa masing-masing dari komponen share button itu mempunyai props yang berbeda. Saat ini mungkin Anda akan melihat ada quote= dan hastag=, kebetulan untuk url itu tetap karena itu harus di masukkan ke dalam komponen tersebut namun yang lainnya itu opsional.

Jika Anda perhatikan baik-baik, disini saya menggunakan inertia js dengan typescript. Maka disini jika Anda lihat saya memakai yang namanya route dari tighten. Itu adalah full url dari aplikasi yang sedang kita bangun, seperti contoh misalnya: http://app-name.test/articles/your-article-slug. Kurang lebih seperti itulah isi dari url tersebut.

Share Button Yang Biasa

Banyak sekali icon yang di sediakan oleh package ini, namun ada beberapa yang sering saya pakai yaitu: Facebook, Twitter, Telegram, Whatsapp, Pinterest, Line, Linkedin dan Pinterest.

Nah, saya akan masukkan semua script yang telah saya sebutkan di atas agar Anda juga mengetahui bahwa masing-masing dari komponen share button itu mempunyai props yang berbeda-beda.

import {
    FacebookIcon,
    FacebookShareButton,
    LineIcon,
    LineShareButton,
    LinkedinIcon,
    LinkedinShareButton,
    PinterestIcon,
    PinterestShareButton,
    TelegramIcon,
    TelegramShareButton,
    TwitterIcon,
    TwitterShareButton,
    WhatsappIcon,
    WhatsappShareButton,
} from 'react-share';
import useTypedPage from '@/Hooks/useTypedPage';
import { ArticleSingleProps } from '@/types';
import useRoute from '@/Hooks/useRoute';

export default function ArticleShare() {
    const { article, clara } = useTypedPage<{ article: ArticleSingleProps }>().props;
    const route = useRoute();
    return (
        <div className='mb-8 '>
            <h4 className='mb-2 text-slate-500'>Share</h4>

            <div className='flex items-center gap-2 [&>button>svg]:h-8 [&>button>svg]:w-8 [&>button>svg]:rounded-lg'>
                <FacebookShareButton
                    url={route('articles.show', [article])}
                    quote={article.excerpt}
                    hashtag={article.tags.map((tag) => tag.name).join(', ')}>
                    <FacebookIcon />
                </FacebookShareButton>
                <TwitterShareButton
                    url={route('articles.show', [article])}
                    title={article.excerpt}
                    via={clara.app_name}
                    hashtags={article.tags.map((tag) => tag.name)}>
                    <TwitterIcon />
                </TwitterShareButton>
                <TelegramShareButton url={route('articles.show', [article])} title={article.title}>
                    <TelegramIcon />
                </TelegramShareButton>
                <WhatsappShareButton url={route('articles.show', [article])} title={article.title}>
                    <WhatsappIcon />
                </WhatsappShareButton>
                <PinterestShareButton
                    url={route('articles.show', [article])}
                    media={article.picture}
                    description={article.excerpt}>
                    <PinterestIcon />
                </PinterestShareButton>
                <LineShareButton url={route('articles.show', [article])} title={article.title}>
                    <LineIcon />
                </LineShareButton>
                <LinkedinShareButton url={route('articles.show', [article])} title={article.title}>
                    <LinkedinIcon />
                </LinkedinShareButton>
            </div>
        </div>
    );
}

Maka jika Anda perhatikan, bahkan ada 1 props yang tidak ada di tempat lain seperti yang di pakai oleh Pinterest yaitu media=.

Modifikasi Icon

Sebenarnya jika Anda perhatikan, disini saya design icon nya menggunakan tailwind css yang langsung di tembah dari parent div nya. Namun sebenarnya, Anda bisa langsung memodifikasi nya tepat pada icon itu sendiri. Berikut contoh untuk icon twitter. Alhamdulillah, untuk icon ini props nya tidak berbeda-beda, jadi keseluruhan dari props nya sama.

<TwitterIcon 
    borderRadius={32}
    iconFillColor={'#ff0000'}
    round={10}
    size={32}
/>

Menggunakan Icon External

Mungkin kalian berfikir ingin menggunakan icon sendiri, itu bahkan tidak ada masalah sama sekali. Seperti misalnya kita ingin menggunakan tabler icons, maka kita bisa membuat seperti ini.

import { FacebookShareButton, TwitterShareButton } from 'react-share';
import useTypedPage from '@/Hooks/useTypedPage';
import { ArticleSingleProps } from '@/types';
import useRoute from '@/Hooks/useRoute';
import { IconBrandFacebook, IconBrandTwitter } from '@tabler/icons-react';

export default function ArticleShare() {
    const { article, clara } = useTypedPage<{ article: ArticleSingleProps }>().props;
    const route = useRoute();
    return (
        <div className='mb-8 '>
            <h4 className='mb-2 text-slate-500'>Share</h4>

            <FacebookShareButton
                url={route('articles.show', [article])}
                quote={article.excerpt}
                hashtag={article.tags.map((tag) => tag.name).join(', ')}>
                <IconBrandFacebook className='h-5 w-5 stroke-[1.25]' />
            </FacebookShareButton>

            <TwitterShareButton
                url={route('articles.show', [article])}
                title={article.excerpt}
                via={clara.app_name}
                hashtags={article.tags.map((tag) => tag.name)}>
                <IconBrandTwitter className='h-5 w-5 stroke-[1.25]' />
            </TwitterShareButton>
        </div>
    );
}

Sayang nya, icon ini untuk tabler ini terbatas, karena jika Anda berfikir untuk membuat share ke Line. Itu tidak akan ada pada icon tabler ini. Untuk keseluruhan icon, kalian bisa lihat langsung di website resmi nya yaitu: https://tabler-icons.io/, dan cari untuk "Brand. Maka harusnya akan muncul semua brand company yang kalian inginkan.

Kesimpulan

Seperti yang saya bilang di awal, hal ini bisa dibuat secara manual, namun. Jika ada package yang dapat membantu kita, kenapa kita harus membuatnya secara manual. Bahkan sebenarnya, banyak sekali package yang menyediakan tentang share button ini. Namun, beberapa dari mereka telah saya pakai, dan jatuh cinta ke react-share ini.

Semoga artikel ini bermanfaat, saya Irsyad. Dan saya akan melihat Anda di artikel selanjutnya.

Irsyad A. Panjaitan

Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.

Irsyad A. PanjaitanGo to Irsyad A. Panjaitan profile

Follow me on

Support me

Github