Provides a React component with Meyer Reset styles for every element in Meyer Reset. For use with css-modules.
npm install 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!
``
yarn add lemon-reset
Use these components as a drop in replacement for your existing HTML tags!
`javascript
import { P } from 'lemon-reset';
ReactDOM.render(
Hello World
, myContainer);Wrap Lemon Reset components in your own custom components!
javascript
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 {children} ;
};
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:
javascript
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:
bash
make build
`Otherwise, you can do:
bash
NODE_ENV=production yarn babel src --out-dir lib --copy-files
``