@noths/elements
v0.0.2-15
Published
Component library for the NOTHS design system
Downloads
18
Maintainers
sskrzek-noths
matt-noths
chenboyi
froogle
marksalvin
danielc-noths
codingiam
stoikerty
sangeethar
noths-tech
dansearle-noths
camsoft
emanuelaiancKeywords
Readme
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
_documentfile which uses theNothsElementsScriptbefore 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/elementsas 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),
};
},
};Contributing
To contribute and create new components please see CONTRIBUTING.md.