react-bullet-points v1.0.3

react-bullet-points

Simple Bulleted list

Install

npm install --save react-bullet-points

Usage

Unordered list

import React, { Component } from 'react'

import Bullets from 'react-bullet-points'
import 'react-bullet-points/dist/index.css'

const App = () => {
  const bulletPoints = [
    {
      string: 'item 1'
    },
    {
      string: 'item 2'
    },
    { string: 'item 3', color: 'red' }
  ]
  return <Bullets type='square' bulletPoints={bulletPoints} />
}

Ordered list

const App = () => {
  const bulletPoints = [
    {
      string: 'item 1'
    },
    {
      string: 'item 2',
      color: 'green'
    },
    { string: 'item 3' }
  ]
  return <Bullets type='I' ordered bulletPoints={bulletPoints} />
}

Nested list

const App = () => {
  const bulletPoints = [
    {
      string: 'item 1',
      color: 'red'
    },
    {
      string: 'item 2',
      bulletPoints: [
        { string: 'item 2 - sub-item 1', color: 'green' },
        { string: 'item 2 - sub-item 2', color: 'red' }
      ]
    },
    {
      type: 'A',
      ordered: true,
      string: 'item 3',
      color: 'blue',
      bulletPoints: [
        { string: 'item 3 - sub-item 1', color: 'green' },
        {
          ordered: false,
          type: 'circle',
          string: 'item 3 - sub-item 2',
          bulletPoints: [
            { string: 'item 3 - sub-item 2 - 1', color: 'green' },
            { string: 'item 3 - sub-item 2 - 2', color: 'red' }
          ]
        },
        { string: 'item 3 - sub-item 3', color: 'blue' }
      ]
    }
  ]
  return <Bullets type='circle' ordered={false} bulletPoints={bulletPoints} />
}

export default App

props

License

MIT © Sreekanth