Skip to content

Instantly share code, notes, and snippets.

Avatar
💭
Looking for work

Danny Andrews danny-andrews

💭
Looking for work
View GitHub Profile
View compare-component-injection-problem.jsx
const LuckyNumber = ({ component: Component }) => <Component number={Math.random()} />;
const AppBody = ({number}) => <div>{message}: {number}!</div>;
// How do I get the message prop to AppBody? 🤔🤔🤔
const App = () => <LuckyNumber component={AppBody} />;
@danny-andrews
danny-andrews / compare-inline-render-prop.jsx
Last active Oct 10, 2017
React Abstractions: Compare render props
View compare-inline-render-prop.jsx
const LuckyNumber = ({ render }) => render({ number: Math.random() });
const App = ({ message }) => (
<LuckyNumber
render={({number}) => <div>{message}: {number}!</div>}
/>
);
View webpack.config.js
{
test: /\.(jsx?)$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
query: {
plugins: [
[
'babel-plugin-react-css-modules',
{
@danny-andrews
danny-andrews / side-effects.js
Created Oct 9, 2017
Do You Really Need react-css-modules?: Side-effects
View side-effects.js
// With css-loader
import styles from './styles.scss';
export default () => <div className={styles.myClass}>Hi</div>;
// With react-css-modules
import './styles.scss';
export default () => <div styleName="myClass">Hi</div>;
@danny-andrews
danny-andrews / using-classnames.js
Last active Oct 9, 2017
Do You Really Need react-css-modules?: Using classnames
View using-classnames.js
import styles from './styles.css';
import classnames from 'classnames';
<div className={classnames(styles.localClass, 'global-class')}>Hi</div>;
@danny-andrews
danny-andrews / mixing-global-and-local.jsx
Last active Oct 9, 2017
Do You Really Need react-css-modules?: Mixing global and local
View mixing-global-and-local.jsx
// With react-css-modules
import './styles.css';
<div className="global-class" styleName="local-class">Hi</div>;
// With css-loader
import styles from './styles.css';
<div className=`${styles.localClass} global-class`>Hi</div>;
View blahblah.md

Disclaimer: This article is in no way meant to belittle the react-css-modules project, or its author. Gajus is a smart dude and does a lot of great work for free for the JavaScript community to enjoy! ❤️ This is merely an evaluation of this particular library.

As with many popular libraries, I'm sure "react-css-modules" had a valid use-case at the time it was created, but at the present, it's drawbacks far outweigh its benefits. This article is meant to be a warning against picking it up without thinking about what you get from it.

tl;dr: Use "css-loader" over "react-css-modules"/"babel-plugin-react-css-modules" because the latter relies on side-effects, adds cognitive overhead (too much 🦄 ), causes React errors in your tests, requires complex webpack config, requires an additional dependency, is slower than css-loader, and doesn’t work with webpack/babel import aliases.

"PROs"*

**Throws error when trying to use an undefined class name.

@danny-andrews
danny-andrews / component-injection-example.jsx
Last active Oct 10, 2017
React Abstractions: Component Injection
View component-injection-example.jsx
const LuckyNumber = ({ component: Component }) => <Component number={Math.random()} />;
const AppBody = ({ number }) => <div>Your number is: {number}!</div>;
const App = () => <LuckyNumber component={AppBody} />;
@danny-andrews
danny-andrews / component-decorator-example.jsx
Last active Dec 4, 2017
React Abstractions: HoC example
View component-decorator-example.jsx
const withLuckyNumber = Component => (props) => <Component number={Math.random()} {...props} />;
const UnconnectedApp = ({ number }) => <div>Your number is: {number}!</div>;
const App = withLuckyNumber(UnconnectedApp);
@danny-andrews
danny-andrews / render-prop-example.jsx
Last active Oct 10, 2017
React Abstractions: Render Prop
View render-prop-example.jsx
const LuckyNumber = ({ render }) => render({ number: Math.random() });
const App = () => (
<LuckyNumber
render={({number}) => <div>Your number is: {number}!</div>}
/>
);