https://github.com/eykrehbein/atomize
A collection of tiny, modular & type-safe libraries that enhance the default React workflow
https://github.com/eykrehbein/atomize
library react typescript
Last synced: 2 months ago
JSON representation
A collection of tiny, modular & type-safe libraries that enhance the default React workflow
- Host: GitHub
- URL: https://github.com/eykrehbein/atomize
- Owner: eykrehbein
- License: mit
- Created: 2020-05-28T14:35:28.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-08T02:04:20.000Z (over 3 years ago)
- Last Synced: 2025-02-09T18:38:33.084Z (over 1 year ago)
- Topics: library, react, typescript
- Language: TypeScript
- Homepage: https://docs.atomize.xyz/
- Size: 2.2 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Atomize
A collection of tiny, modular & type-safe libraries that enhance the default React workflow
## Packages
- [@atomize/component](https://www.npmjs.com/package/@atomize/component) - A toolkit for creating stylizable and extensible React components
- [@atomize/context](https://www.npmjs.com/package/@atomize/context) - Enhanced React-Context management
- (WIP) @atomize/redux
## Docs
You can find a well structured documentation at [docs.atomize.xyz](https://docs.atomize.xyz)
## Examples (more can be found in the docs)
### Creating stylable and animatable components
```tsx
import { createBaseComponent, px, percent } from "@atomize/component";
const Button = createBaseComponent("button")`
background-color: red;
`;
export const App = () => (
Click
);
```
### Creating context and provider at the same time
```tsx
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 = () => Hello World;
```
# LICENSE
MIT