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: about 1 month 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 (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-08T02:04:20.000Z (almost 2 years ago)
• Last Synced: 2024-10-06T11:34:40.648Z (3 months 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: "[email protected]" },

    () => {

        if (condition) return { email: "[email protected]" };

        return { email: "[email protected]" };

    }

);

// ---

const App = () => Hello World;

```

# LICENSE

MIT