lemon-reset

🍋 Lemon Reset

A set of React components that provide Meyer Reset styles for use with CSS Modules.

For all the DOM tags used in Meyer Reset, Lemon Reset provides a React component with those reset styles, minimizing the effect of browser quirks. In a React world, we prefer components that are self-contained and unreliant on global styling.

Installation

yarn add lemon-reset

Build

Our makefile assumes that you have virtualenv available globally, as we use a python environment for running pre-commit.

If you have virtualenv, simply run:

make build

Otherwise, you can do:

NODE_ENV=production ./node_modules/.bin/babel src --out-dir lib --copy-files

Usage

Use these components as a drop in replacement for your existing HTML tags!

import { P } from 'lemon-reset';

ReactDOM.render(
  <P>Hello World</P>,
  myContainer
);

Wrap Lemon Reset components in your own custom components!

import { Span, Div } from 'lemon-reset';
import styles from './Container.scss';

type Props = {
  display: 'inline' | 'inline-block' | 'block' | 'none';
}

const Container = ({children, display}: Props) {
    const Tag = display === 'inline' ? Span : Div;
    const classes = styles[`display--${display}`]

    return (
        <Tag className={styles[`display--${display}`]}
            { children }
        </Tag>
    )
}

export default Container;

Pass in any props! If you need to pass in a ref, you'll need to pass it in as a tagRef:

<Span tagRef={span => console.log(span)}>
    This has a ref
</Span>