Skip to content

Instantly share code, notes, and snippets.

@petejodo

petejodo/SomeComponent.jsx

Last active October 4, 2016 15:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save petejodo/2c88a608643ae63fe8c0fcbb26ca0838 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save petejodo/2c88a608643ae63fe8c0fcbb26ca0838 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. petejodo revised this gist Oct 4, 2016. 2 changed files with 39 additions and 0 deletions.
    13 changes: 13 additions & 0 deletions using-withStyles.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    import withStyles from './withStyles';
    import { DOM } from 'react';
    import SomeComponent from './SomeComponent';

    const colorPrimary = withStyles(css.colorPrimary);
    const colorPrimaryButton = withStyles(
    colorPrimary,
    css.button
    );

    const PrimaryButton = colorPrimaryButton(DOM.button);
    const PrimaryLink = colorPrimaryButton(DOM.link)
    const PrimaryComponent = colorPrimary(SomeComponent);
    26 changes: 26 additions & 0 deletions withStyles.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    import createHelper from 'recompose/createHelper'
    import createEagerFactory from 'recompose/createEagerFactory';

    const withStyles = () => {
    const className = [...arguments].reduce((prev, next) => {
    // `next` should be either a string or a `withStyles()` HOC
    // Note below where calling the HOC w/o a param returns className
    // maybe there's a better way to do this
    return `${prev} ${typeof next === 'function' ? next() : next}`;
    }, '');

    return BaseComponent => {
    if (BaseComponent) {
    const factory = createEagerFactory(BaseComponent);
    return props => factory({
    ...props,
    // className: `${props.className} ${className}`
    // github's template string formatting is buggy
    className: props.className + ' ' + className
    });
    }
    return className;
    };
    };

    export default createHelper(withStyles, 'withStyles');
  2. petejodo created this gist Oct 3, 2016.
    14 changes: 14 additions & 0 deletions SomeComponent.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    import React, { DOM } from 'react';
    import { colorPrimary, colorPrimaryButton } from './style-hocs';

    const PrimaryButton = colorPrimaryButton(DOM.button);
    const PrimaryLink = colorPrimaryButton(DOM.link)
    const PrimaryComponent = colorPrimary(AnotherComponent);

    export const SomeComponent = props => (
    <div>
    <PrimaryButton>A primary button</PrimaryButton>
    <PrimaryLink href='someurl.com'>A primary link (that looks like a button)</PrimaryLink>
    <PrimaryComponent>Some component with just the color styling and no button styling</PrimaryComponent>
    </div>
    );
    15 changes: 15 additions & 0 deletions style-hocs.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    import withProps from 'recompose/withProps';
    import compose from 'recompose/compose';
    import classnames from 'classnames';
    // localized styles
    import css from './styles.scss';

    export const colorPrimary = withProps(ownerProps => ({
    className: classnames(ownerProps.className, css.colorPrimary)
    }));

    // Could also potentially compose the styles
    export const colorPrimaryButton = compose(
    colorPrimary,
    withProps(ownerProps => ({ className: classnames(ownerProps.className, css.button) }))
    );