JavaScript
Need help with lemon-reset?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
Yelp

Description

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

132 Stars 12 Forks MIT License 86 Commits 3 Opened issues

Services available

Need anything else?

🍋 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.