🍋 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 buildOtherwise, you can do:
NODE_ENV=production yarn babel src --out-dir lib --copy-files
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent