Feat: Provide minified styles (#44) ✨

* Docs: Add documentation on how to use default styles with various approaches (webpack, CDN, other 📚 Fixes #42 * Feat: Provide uncompressed and compressed assets ✨ Fixes #43
dowjones · Feb 11, 2018 · 264a3c1 · 264a3c1
1 parent 66faa44
commit 264a3c1
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -38,8 +38,8 @@ A lightweight and fast control to render a select component that can display hie
   - [data](#data)
   - [placeholderText](#placeholdertext)
 - [Styling and Customization](#styling-and-customization)
-  - [With Bootstrap styles](#styling-and-customization)
-  - [With Material Design styles](#styling-and-customization)
+  - [Using default styles](#default-styles)
+  - [Customizing with Bootstrap, Material Design styles](#customizing-styles)
 - [Performance](#performance)
   - [Search optimizations](#search-optimizations)
   - [Search debouncing](#search-debouncing)
@@ -196,7 +196,46 @@ The text to display as placeholder on the search box. Defaults to `Choose...`
 
 ## Styling and Customization
 
-The component brings minimal styles for bare-bones functional rendering. It is kept purposefully minimal so that user can style/customize it completely to suit their needs. Checkout `/docs` folder for some examples.
+### Default styles
+
+The component brings minimal styles for bare-bones functional rendering. It is kept purposefully minimal so that user can style/customize it completely to suit their needs. 
+
+#### Using WebPack
+
+If you're using a bundler like webpack, make sure you configure webpack to import the default styles. To do so, simply add this rule to your webpack config:
+
+```js
+// allow webpack to import/bundle styles from node_modules for this component
+module: {
+  rules: [
+    {
+      test: /\.css$/,
+      use: ExtractTextPlugin.extract({
+        fallback: 'style-loader',
+        use: [{
+          loader: 'css-loader'
+        }]
+      }),
+      include: /node_modules[/\\]react-dropdown-tree-select/
+    }
+  ]
+}
+```
+
+#### Using a CDN
+You can import and place a style link directly by referencing it from a CDN.
+
+```html
+<link href="https://unpkg.com/react-dropdown-tree-select/dist/styles.css" rel="stylesheet">
+```
+
+Note: Above example will always fetch the latest version. To fetch a specific version, use `https://unpkg.com/react-dropdown-tree-select@<version>/dist/styles.css`. Visit [unpkg.com](https://unpkg.com/#/) to see other options.
+
+#### Using with other bundlers
+You can reference the files from `node_modules/react-dropdown-tree-select/dist/styles.css` to include in your own bundle via gulp or any other bundlers you have.
+
+### Customizing styles
+Once you import default styles, it is easy to add/override the provided styles to match popular frameworks. Checkout `/docs` folder for some examples.
 
  - [With Bootstrap](/docs/examples/bootstrap)
  - [With Material Design ](/docs/examples/material)

diff --git a/src/tree-node/action.js b/src/tree-node/action.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const Action = (props) => {
+const Action = props => {
   const { title, className, text, onAction, actionData } = props
 
-  const onClick = (e) => {
+  const onClick = () => {
     if (typeof onAction === 'function') {
       onAction(actionData)
     }

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,7 +1,7 @@
 const path = require('path')
 const webpack = require('webpack')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')
 
 module.exports = {
   devtool: 'source-map',
@@ -34,14 +34,10 @@ module.exports = {
       'process.env.NODE_ENV': JSON.stringify('production')
     }),
     new ExtractTextPlugin('styles.css'),
-    new webpack.optimize.UglifyJsPlugin({
-      sourceMap: true,
-      exclude: /node_modules/
-    }),
-    new BundleAnalyzerPlugin({
-      analyzerMode: 'static',
-      openAnalyzer: false
-    })
+    new webpack
+      .optimize
+      .UglifyJsPlugin({sourceMap: true, exclude: /node_modules/}),
+    new BundleAnalyzerPlugin({analyzerMode: 'static', openAnalyzer: false})
   ],
   module: {
     rules: [
@@ -54,12 +50,16 @@ module.exports = {
       {
         test: /\.css$/,
         use: ExtractTextPlugin.extract({
-          use: {
-            loader: 'css-loader',
-            options: {
-              localIdentName: 'react-dropdown-tree-select__[local]--[hash:base64:5]'
+          use: [
+            {
+              loader: 'css-loader',
+              options: {
+                localIdentName: 'react-dropdown-tree-select__[local]--[hash:base64:5]',
+                importLoaders: 1,
+                minimize: true
+              }
             }
-          }
+          ]
         }),
         include: /src/,
         exclude: /node_modules/