leonardoleo / lemon-reset

Consistent, cross-browser React DOM tags, powered by CSS Modules. 🍋

🍋 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 not reliant on global styling.

Read more about the motivation behind Lemon Reset in our blog post!

Installation

yarn add lemon-reset

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.css';

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={classes}>{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>

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 yarn babel src --out-dir lib --copy-files