@atomify/kit v1.4.6
@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.
11 months ago
1 year ago
1 year ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago