@noths/elements NPM

Elements

About

The component library & design system for notonthehighstreet.com

Usage

Using a Component

import { Heading } from '@noths/elements';

<Heading />;

Next JS App SSR Setup + Importing via CDN

Create custom _document file which uses the NothsElementsScript before any app code.

// _document.js

import { NothsElementsScript } from '@noths/elements';

class MyDocument extends Document {
  render() {
    return (
      <html>
        <Head />
        <body>
          <NothsElementsScript />
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

Extend next webpack config like so with the ElementsWebpackPlugin. This sets @noths/elements as a webpack external when used in the browser, causing the app to use the library from a CDN.

// next.config.js

const { ElementsWebpackPlugin } = require('@noths/elements');

module.exports = {
  webpack: (webpackConfig, { isServer }) => {
    return isServer
      ? webpackConfig
      : {
          ...webpackConfig,

          externals: {
            react: 'React',
            'react-dom': 'ReactDOM',
            'styled-components': 'styled',
          },

          plugins: [].concat(webpackConfig.plugins, new ElementsWebpackPlugin()).filter(Boolean),
        };
  },
};