lemon-reset

by Yelp

Consistent, cross-browser React DOM tags, powered by CSS Modules. πŸ‹

132 Stars 12 Forks Last release: over 1 year ago (v1.3.2) MIT License 86 Commits 6 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

πŸ‹ Lemon Reset

npm Build Status gzip size install size

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(

Hello World

, 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:

 console.log(span)}>This has a ref

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.