@atomify/kit

Utility kit to use with Atomify hooks components.

Installation

npm i @atomify/kit

Configuration

Atomify hooks is made for the modern browsers. Its recommended in legacy browsers to add the following while compiling to ES5 with Babel: exclude: /node_modules\/(?!@atomify)/

Its recommended to use Web Components polyfill to support everything from Web Components spec in legacy browsers.

Utilities

Set of utilities that are shipped with the @atomify/kit:

| Name | Readme | | ------- | ------- | | Store | README | Inview | README | Loadable | README | Media Query | README

Hooks

Set of hooks that are shipped with the @atomify/kit:

useClassname

const classes = useClassname({ hidden: true, "has-item": !![].length });

// Toggle classes on the div
classes.toggle('hidden');

// Add classes to the div
classes.add('another-class');

// Check if a class exists
classes.contains('has-items');

<div class={classes}>hello{ test.current }</div>

useStore

useStore is a small wrapper around the Store utility

const [state, subscribe, prevState] = useStore<StateType>(store);

// Returns the initialState
console.log(state);

subscribe(() => {
    // Logs the previousstate
    console.log(prevstate);
});

TODO

• Add documentation for component.