👋 👋 Support Styleguidist on Open Collective I’m happy to announce a new major release of . React Styleguidist Webpack 4 support Webpack 3 is still supported too. Node.js 6 is the lowest supported version Styleguidist won’t work with Node.js 4 anymore. Examples are wrapped in React.Fragment You don’t need to wrap multiple JSX tags in a div anymore. // 6.x<div>  <Button primary>Primary button</Button>  <Button secondary>Secondary button</Button></div>// 7.x<Button primary>Primary button</Button><Button secondary>Secondary button</Button> Fragment JSX syntax also works: // 7.x<>  <Button primary>Primary button</Button>  <Button secondary>Secondary button</Button></> New format of the template option We’re now using and instead of . This will make things like or fonts from much easier. mini-html-webpack-plugin @vxna/mini-html-webpack-template html-webpack-plugin adding a favicon Google Fonts If you’re using a custom HTML template, you need to update your style guide config. Instead of: // 6.xmodule.exports = {  template: './styleguie/template.html'} You need to use something like this: // 7.xmodule.exports = {  template: {    favicon: 'https://assets-cdn.github.com/favicon.ico'  }} Or like this: // 7.xmodule.exports = {  template: {    head: {      links: [        {          rel: 'stylesheet',          href: 'https://fonts.googleapis.com/css?family=Roboto'        }      ]    }  },  theme: {    fontFamily: {      base: '"Roboto", sans-serif'    }  }} There are a few more changes, see . a full change log ❤️ Huge thanks to , , and others for help with this release️! ❤️ Andrey Okonetchnikov Nikolay Burlov Rubén Moya

Google

React 16.0–16.6 new features for every day use

React Styleguidist 7.0.0- hello webpack 4, goodbye Node.js 4

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Add the Fucking Change Log

8 Steps to Find the Best Reporting Component for Your Application

A Beginner's Guide to Performance Optimization Using React.memo()

Best-practices learnt from delivering a quality Angular4 application

Share Code between React and React Native Apps

Content vs Container

Add the Fucking Change Log

8 Steps to Find the Best Reporting Component for Your Application

A Beginner's Guide to Performance Optimization Using React.memo()

Best-practices learnt from delivering a quality Angular4 application

Share Code between React and React Native Apps

Content vs Container

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps