Bundling components-extra in your project

Optimizing bundle size

components-extra is tree-shakeable, meaning that you can import its components as named imports, like this:

import { BackToTop } from 'components-extra'

If your bundler is set up to use the tree-shakeable libraries, it will automatically only add the named imports you used. In this example, only the <BackToTop> button will be included in your bundle.

Else, if your bundler is not set up to do tree-shaking, you can still only include the components you need by importing them as defaults like this:

import BackToTop from 'components-extra/components/BackToTop'

Note: you will need a transpiler like babel to make the JS work in the browser. (Even if es6 is coming soon to moder broswers). Some projects templates (like create-react-app) handle this for you by default.

es5

If your project is not set up to transpile the esm/es builds, you can still use the cjs, written in es5:

const BackToTop = require("components-extra").BackToTop

Note: you can also set up aliases in your project to alias components-extra/components to components-extra if you want imports to look like import BackToTop from 'components-extra/BackToTop'. You can check out how to do this with webpack and with babel.