react-color.macro

A macro for babel-plugin-macros
that helps to reduce bundle size caused by named components imports
from react-color.

Problem

react-color is a
collection of nice looking color picker components. But being bundled
as a commonjs only library it can't be fully optimized by tools like
rollup, which one, for an instance,
mainly optimized for bundling es6 modules.
As a result, importing of color pickers to es6 modules
causes an inclusion of all exported components code in final bundle.

Installation

This module is distributed via npm
which is bundled with node
and should be installed as one of your project's devDependencies

``bash
npm install --save-dev react-color.macro
`

Usage

Instead of importing picker components from react-color

`js
import { SketchPicker } from 'react-color';

export default () => ;
`

use this macro as import source

`js
import { SketchPicker } from 'react-color.macro';

export default () => ;
`

Other solutions

$3

The same effect can be achieved by importing default component from
a module in lib/*:

`js
import SketchPicker from 'react-color/lib/Sketch';

export default () => ;
``

increasing amount of import specifier declarations needed for each
imported identifier.

$3

In case
babel-plugin-macros
is not an option,
you can use babel plugins that helps to transform import specifiers in
common way:
babel-plugin-transform-imports,
babel-plugin-imports