Notorious Party Muppets

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

    0.3.2 • Public • Published

    What does this component do?

    This agnostic component is a Category tag inserted into the product page. When clicked, this tag redirects the user to the product category page.

    If the product is part of a specific collection, you can also enable a collection tag that will appear next to the category tag.


    Download the package

    using

    • npm i @acctglobal/product-tags

    or

    • yarn add @acctglobal/product-tags

    Usage examples

    Import the component in your file:

    • import {ProductTags} from '@acctglobal/product-tags

    Declare the component and pass your LinkComponent inside of the CustomTagComponent prop.

    • <ProductTags
        tagCategoryLabel="Category"
        urlCategory="/category"
        tagCollectionLabel="Collection"
        urlCollection="/collection"
        CustomTagComponent={Link}
      />
      

    CSS example

    • [data-tags-container] {
        display: flex;
        gap: 12px;
      }
      
      [data-tag-category] {
          background-color: #94E7AD;
          border: 2px solid #40AA60;
          border-radius: 50px;
          padding: 4px 11px 4px 10px;
          text-decoration: none;
          color: #2A7641;
          font-weight: 700;
      }
      
      [data-tag-collection] {
          background-color: #FF8E8E;
          border: 2px solid #FF5050;
          border-radius: 50px;
          padding: 4px 11px 4px 10px;
          text-decoration: none;
          color: black;
          font-weight: 700;
      }
      

    Result


    Result

    Props


    Prop Value Description
    tagCategoryLabel string Mandatory. Set the title of the tag
    urlCategory string Mandatory. Set the url to your category page
    tagCollectionLabel string Optional. Set the title of the tag
    urlCollection string Optional. Set the url to your collection page
    tagStyles React.CSSProperties Optional. Set the tag styles
    CustomTagComponent ComponentType< ButtonTag > Mandatory. Set the Link component for the tags

    ButtonTag

    Prop Value Description
    to string Mandatory. Set the url
    style CSSProperties Optional. Pass styles as props
    children ReactNode Optional. It represents anything that can be set as children of a ReactElement

    ### CSS identifiers
    Identifier Description
    data-tags-container styles the container that wraps the component.
    data-tag-category styles the category tag of the component.
    data-tag-collection styles the collection tag of the the component.

    Keywords

    none

    Install

    npm i @acctglobal/product-tags

    DownloadsWeekly Downloads

    63

    Version

    0.3.2

    License

    MIT

    Unpacked Size

    25.2 kB

    Total Files

    15

    Last publish

    Collaborators

    • luiz.priolli
    • ricardo.freitas
    • fabioacct