ChipList (React version)

ChipList is a basic React component that renders a list of keywords. It allows scoped class styles with CSS modules and takes in account global style for custom CSS frameworks.

Demo

Demo at CodeSandbox

Installation

npm install --save @jmsr/chiplist-react

You also will want to configure CSS Modules for your project to use local scoped styles for the chips.

How to use

General styles (CSS frameworks)

1. Define your global styles/framework classes:

{
  .is-bright { color: black; background: white; }
  .is-dark { color: white; background: black; }
  .gray-border { border: 2px solid gray; }
}

2. Declare the class names and use them in your chiplist:

import ChipList from '@jmsr/chiplist-react'

/* Each content is classified by a 'type' */
const momentChips = [
  { content: 'Morning',       type: 'dayLight' },
  { content: 'Afternoon',     type: 'sunset'   },
  { content: 'Night',         type: 'obscure'  },
  { content: 'Early morning', type: 'obscure'  }
]

/* Each 'type' is defined as one or more class names */
const ambientTypes = {
  dayLight: 'is-bright',
  sunset:   'is-bright gray-border',
  obscure:  'is-dark'
}

const AmbientChipList = () => (
  <ChipList chips={momentChips} customTypes={ambientTypes} />
)

Component scoped styles (CSS Modules)

import ChipList from '@jmsr/chiplist-react'
/* Import your own style class definitions in your module with CSS Modules help! */
import firmamentListStyles from './FirmamentChipList.module.scss'

const firmamentChips = [
  { content: 'Sun',     type: 'dayStar'           },
  { content: 'Moon',    type: 'dayNightSatellite' },
  { content: 'Venus',   type: 'sunsetPlanet'      },
  { content: 'Saturn',  type: 'nightPlanet'       }
]

/* Name classes could refer to CSS Modules attributes or fallback in global class names */
const firmamentTypes = {
  dayStar:           'bg-blue',             // 'bg-blue' local
  dayNightSatellite: 'bg-blue gray-border', // 'gray-border' global
  sunsetPlanet:      'is-dark gray-border', // 'is-dark' global
  nightPlanet:       'is-dark'
}

/* When using 'cssModule' prop, you will enable 'firmamentListStyles' class name
 * definitions to be matched in 'firmamentTypes' object, applied as local styles
 * to the 'FirmamentChipList' component.
 */
const FirmamentChipList = () => (
  <ChipList
    chips={momentChips}
    customTypes={firmamentTypes}
    cssModule={firmamentListStyles} />
)

Props specification

| Attribute | Type | Default | Description | | :-------- | :--------: | :-------: | :------------------------------------------------------------------------------------------------------- | | chips | [object] | [] | Array of objects with each chip content and type: [{ content: 'Chip 1', type: 'type1' }, { content: 'Chip 2', type: 'type2' }, ...] | | customTypes | object | {} | Object that defines pairs of named chip types with style class names: {type1: 'is-bold', type2: 'centered-text bg-blue', ...} | | cssModule | object | {} | Id map object generated by importing a stylesheet with CSS Modules. | | listTagName | string | div | Specify the containers HTML tag for semantic layout scenarios (ex.: nav, section, footer). |

Author

Johan Manuel Serrato Romero

• You're welcome to visit my website

License

ISC. Copyright (c) 2021 Johan Manuel Serrato Romero.