A generic toolkit with utilities and hooks
npm install @atomify/kit``sh`
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.
:
| Name | Readme |
| ------- | ------- |
| Store | README
| Inview | README
| Loadable | README
| Media Query | README
Hooks
Set of hooks that are shipped with the @atomify/kit:$3
`tsx
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');
hello{ test.current }
`
$3
useStore is a small wrapper around the Store utility`tsx
const [state, subscribe, prevState] = useStore(store);// Returns the initialState
console.log(state);
subscribe(() => {
// Logs the previousstate
console.log(prevstate);
});
``