Node Packaged Modules

    @acctglobal/shareproduct
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.2 • Public • Published

    Share Product

    About The Component

    This component aims to generate product sharing links in an agnostic way..

    Getting Started

    This component can be used anywhere you want in ecommerce, in a responsive and agnostic way.

    image

    • Mobile

    image

    • Desk

    Installation

    To use Share Product install the package via yarn or npm and import it wherever you want to use it.

    • Install package
    yarn add @acctglobal/shareproduct or npm install

    Usage

    • Import component
    import ShareProduct from '@acctglobal/shareproduct';
    • Just call the component and pass with a children to customize label.
    <ShareProduct
      shareWebSocials="Compartilhar"
      shareProductText="ShareText"
      ShareIcon={ShareIcon}
      CloseIcon={CloseIcon}
      productURL={'LinkUrl'}
      shareLinks={shareLinks}
    />

    Styling

    There are one way to customize the component

    By data styles

    [data-open-modal-button] {
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 14px;
      text-decoration: none;
      color: #000;
    }
    Data for styles
    [data-open-modal-container]
    [data-open-modal-button]
    [data-open-modal-icon]
    [data-open-modal-text]
    [data-modal-background]
    [data-modal-container]
    [data-close-modal-button]
    [data-close-modal-icon]
    [data-modal-share-product-text]
    [data-modal-product-link-container]
    [data-modal-product-text]
    [data-modal-product-link-input]
    [data-modal-copy-link-button]
    [data-modal-share-links-container]
    [data-modal-links-social]
    [data-modal-share-link]
    [data-modal-share-link-icon]
    [data-additional-overlay]

    Props

    Parameter Type Description
    productURL string Mandatory. onClick function to the button
    share string Optional. string optional change share text
    shareProductText string Optional. string optional change shareProductText
    productLinkText string Optional. string optional change productLinkText
    shareWebSocials string Optional. string optional change shareWebSocials text
    ShareIcon () => JSX.Element Optional. function return JSX.Element ShareIcon, has default ShareIcon if not specified you icon
    CloseIcon () => JSX.Element Optional. function return JSX.Element CloseIcon, has default CloseIcon if not specified you icon
    shareLinks Array Mandatory. Array contain object with 4 elements [{ target: string, name: string, url: string, SocialIcon: () => JSX.Element }]
    target string Optional. target link to share as default has '_blank'
    name string Mandatory. id link name
    url string Mandatory. url to share link to social network
    SocialIcon () => JSX.Element Mandatory. Desired social network icon
    AdditionalOverlay boolean Optional. Adds an additional overlay for customization. Created to show the overlay behind the share modal and making it possible to close it when clicking outside the modal

    Contributing

    If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

    1. Fork the Project
    2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
    3. Commit your Changes (git commit -m 'Add some AmazingFeature')
    4. Push to the Branch (git push origin feature/AmazingFeature)
    5. Open a Pull Request
    6. And don't forget to update the changelog

    Contact

    Tiago Albuquerque - tiago.albuquerque@acctglobal.com

    Acknowledgments

    Use this space to list resources you find helpful and would like to give credit to. I've included a few of my favorites to kick things off!

    Keywords

    none

    Install

    npm i @acctglobal/shareproduct

    DownloadsWeekly Downloads

    120

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    77.5 kB

    Total Files

    30

    Last publish

    Collaborators

    • luiz.priolli
    • ricardo.freitas
    • fabioacct