Nuked: Probably Microwaved

    @insightlabs/mui-labeled-badge
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

    @insightlabs/mui-labeled-badge

    A component library to create labeled badges

    Example Badges

    example images

    NPM JavaScript Style Guide

    Release Notes

    version 2.1.0 includes LabeledBadgeMenu component. Create drop-downs using LabeledBadges.

    version 2.0.2 vertically centers label and value

    version 2.0.1 includes forwardRef for LabeledBadge

    version 2.0.0 is updated to work with Material-UI 4.

    Install

    npm install --save @insightlabs/mui-labeled-badge @material-ui/core@latest @material-ui/styles@latest
    #or
    yarn add @insightlabs/mui-labeled-badge @material-ui/core@latest @material-ui/styles@latest

    Usage

    import React from 'react'
    import { LabeledBadge, BadgeList } from '@insightlabs/mui-labeled-badge'
    
    function ExampleComponent() {
      return (
        <BadgeList>
          <LabeledBadge label="Primary" value="Color" />
          <LabeledBadge label="Secondary" value="Color" color="secondary" />
          <LabeledBadge label="Custom" value="Color" color="#f4a742" />
          <LabeledBadge label="Number" value={4500} color="rgb(183, 7, 7)"  />
          <LabeledBadge label="Inverted" value={123} color="primary"  />
          <LabeledBadge label="Click" value="Me" onClick={(args) => console.log("Labeled badge clicked!", args)} />
        </BadgeList>
      )
    }

    LabeledBadgeMenu Usage

    import React from 'react';
    import { LabeledBadgeMenu, BadgeList } from '@insightlabs/mui-labeled-badge';
    import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
    
    const menuItems = [
        { id: 1, value: "Menu Item 1" },
        { id: 2, value: "Menu Item 2" },
        { id: 3, value: "Menu Item 3" }
    ];
    
    function ExampleComponent() {
      const [selectedItem, setSelectedItem] = React.useState(menuItems[0]);
      return (
        <BadgeList>
          <LabeledBadgeMenu
              title="Example"
              text={selectedItem.value}
              icon={<ArrowDropDownIcon />}
              menuItems={menuItems}
              color="primary"
              onItemSelected={setSelectedItem} />
        </BadgeList>
      )
    }

    License

    MIT

    Keywords

    none

    Install

    npm i @insightlabs/mui-labeled-badge

    DownloadsWeekly Downloads

    1

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    165 kB

    Total Files

    13

    Last publish

    Collaborators

    • curtisrutland