trying to use bootstrap...

examples/index.js

@@ -11,7 +11,11 @@ class ReactMailViewer_Ex1 extends React.PureComponent {
       2012,
       2011,
     ]
-    return React.createElement("div", {}, React.createElement(ReactMailViewer.Years, { years }))
+    const classNames = {
+      cn_years: "list-group",
+      cn_year:  "list-group-item",
+    }
+    return React.createElement("div", {}, React.createElement(ReactMailViewer.Years, { years, classNames }))
   }
 }
 

lib/react-mail-viewer.js

@@ -26,16 +26,26 @@
     } = lib
     class Year extends React.PureComponent {
       render(){
-        const { year } = this.props
-        return React.createElement("li", { className: "ReactMailViewer_Year" }, year)
+        const {
+          year,
+          cn_year,
+        } = this.props
+        return React.createElement("li", { className: cn_year || "ReactMailViewer_Year" }, year)
       }
     }
     class Years extends React.PureComponent {
       render(){
-        const { years } = this.props
-        const f = (year, key) => React.createElement(Year, { key, year })
+        const {
+          years,
+          classNames,
+        } = this.props
+        const {
+          cn_years,
+          cn_year,
+        } = classNames || {}
+        const f = (year, key) => React.createElement(Year, { key, year, cn_year })
         const mapped = years && years.map && years.map(f) || []
-        return React.createElement("ul", { className: "ReactMailViewer_Years" }, mapped)
+        return React.createElement("ul", { className: cn_years || "ReactMailViewer_Years" }, mapped)
       }
     }
     const ReactMailViewer = {

package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "mocha",
-    "test-with-coverage": "nyc npm test && nyc report --reporter=text-lcov | coveralls"
+    "test-with-coverage": "nyc npm test && nyc report --reporter=text-lcov | coveralls",
+    "tc": "nyc npm test"
   },
   "repository": {
     "type": "git",

test/test.js

@@ -30,6 +30,17 @@ describe("<Year />", () => {
   })
 })
 
+describe("<Year />(list-group-item)", () => {
+  const year = 2019
+
+  it("shallow",  () => {
+    const cn_year = "list-group-item"
+    const e = React.createElement(ReactMailViewer.Year, { year, cn_year })
+    expect(shallow(e).contains(React.createElement("li", { className: "list-group-item" }, year)))
+    .to.equal(true)
+  })
+})
+
 describe("<Years />", () => {
   const years = [
     2019,
@@ -56,6 +67,36 @@ describe("<Years />", () => {
   })
 })
 
+describe("<Years />(list-group, list-group-item)", () => {
+  const years = [
+    2019,
+    2018,
+    2017,
+    2016,
+    2015,
+    2014,
+    2013,
+    2012,
+    2011,
+  ]
+  const classNames = {
+    cn_years: "list-group",
+    cn_year:  "list-group-item",
+  }
+
+  const {
+    cn_year,
+    cn_years,
+  } = classNames
+
+  it("shallow",  () => {
+    const e = React.createElement(ReactMailViewer.Years, { years, classNames })
+    const mapped = years.map((year, key) => React.createElement(ReactMailViewer.Year, { key, year, cn_year }))
+    expect(shallow(e).contains(React.createElement("ul", { className: cn_years }, mapped)))
+    .to.equal(true)
+  })
+})
+
 describe("<Years />(empty)", () => {
   const years = null