A collection of tiny, modular & type-safe libraries that enhance the default React workflow
-
@atomize/component - A toolkit for creating stylizable and extensible React components
-
@atomize/context - Enhanced React-Context management
-
(WIP) @atomize/redux
You can find a well structured documentation at docs.atomize.xyz
import { createBaseComponent, px, percent } from "@atomize/component";
const Button = createBaseComponent("button")`
background-color: red;
`;
export const App = () => (
<Button animate={{ width: percent(100) }} $color="red" $marginTop={px(20)}>
Click
</Button>
);import { createContext } from "@atomize/context";
const { Context, Provider } = createContext(
{ email: "test@atomize.xyz" },
() => {
if (condition) return { email: "conditionTrue@atomize.xyz" };
return { email: "conditionFalse@atomize.xyz" };
}
);
// ---
const App = () => <Provider>Hello World</Provider>;MIT