Skip to content

Instantly share code, notes, and snippets.

Avatar
💭
Looking for work

Danny Andrews danny-andrews

💭
Looking for work
View GitHub Profile
View render-prop-component-injection-crossover.jsx
const { Component } = React;
const { render } = ReactDOM;
const MyMug = ({ drink, verb = 'Drinking' }) =>
<div>{verb} an {drink}.</div>;
class Caffeinate extends Component {
state = { coffee: 'Americano' };
render() {
View compare-render-prop-solution-1.jsx
const LuckyNumber = ({ component: Component }) => <Component number={Math.random()} />;
// There's no general way to curry named parameters, so we have to do it
// manually.
const AppBody = ({ message }) => ({ number }) => <div>{message}: {number}!</div>;
const App = ({ message }) => <LuckyNumber component={AppBody({ message })} />;
View compare-render-prop-solution-2.jsx
const LuckyNumber = ({ component: Component, componentProps }) => <Component number={Math.random()} {...componentProps} />;
const AppBody = ({ message, number }) => <div>{message}: {number}!</div>;
const App = ({ message }) => <LuckyNumber componentProps={{ message }} component={AppBody} />;
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>}
/>
);
@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 / 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>}
/>
);
@danny-andrews
danny-andrews / facc-example.jsx
Last active Oct 10, 2017
React Abstractions: FaCC
View facc-example.jsx
const LuckyNumber = ({ children }) => children({ number: Math.random() });
const App = () => (
<LuckyNumber>
{({number}) => <div>Your number is: {number}!</div>}
</LuckyNumber>
);
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>;