🍋 Lemon Reset - 为React应用打造的Meyer Reset组件库

Lemon Reset 是一个专门针对React应用程序设计的一组组件库，它融入了Meyer Reset的样式重置理念，以CSS Modules的形式提供服务。这个项目的目标是将浏览器差异的影响降到最低，让React组件更加独立，不依赖全局样式。

安装与使用

只需一行命令，就能轻松安装Lemon Reset 到你的项目中：

yarn add lemon-reset

随后，在你的React代码中，直接替换原有的HTML标签为Lemon Reset 提供的组件即可：

import { P } from 'lemon-reset';

ReactDOM.render(<P>Hello World</P>, myContainer);

甚至可以进一步封装这些组件，使其更具可定制性：

import { Span, Div } from 'lemon-reset';
import styles from './Container.css';

// ... 省略其他代码 ...

Lemon Reset 的组件还支持接收所有原生HTML属性，包括通过tagRef传递的ref对象，以方便对DOM元素进行操作：

<Span tagRef={span => console.log(span)}>This has a ref</Span>

技术分析

Lemon Reset 基于Babel构建，确保组件在各种环境中的兼容性。它利用了CSS Modules来实现样式隔离，避免了样式冲突的问题。此外，项目配置了pre-commit钩子，保证了代码质量的统一和标准。

应用场景

Lemon Reset 非常适合那些追求组件化和样式一致性，并且希望减少浏览器默认样式影响的React项目。无论是在大型企业级应用，还是个人开发的小型网站，都能发挥其优势，提升用户体验。

项目特点

• 组件化：将Meyer Reset 样式以React组件形式提供，易于使用，也易于与其他代码集成。
• 样式隔离：基于CSS Modules实现，避免了样式污染问题。
• 灵活扩展：允许接收任意props，便于自定义和扩展。
• 易维护：强大的自动化构建流程，包括ESLint和Prettier等工具，保证代码质量。

如果你正在寻找一个能够帮助你在React世界里实现更干净、更一致的布局风格的解决方案，那么Lemon Reset 绝对值得尝试。立即安装并开始你的无浏览器差异之旅吧！

了解更多关于Lemon Reset 的动机！