diff --git a/README.md b/README.md index 2e2fb71..d4e2d94 100644 --- a/README.md +++ b/README.md @@ -3,3 +3,115 @@ [![Build Status](https://travis-ci.com/WebReflection/uhandlers.svg?branch=master)](https://travis-ci.com/WebReflection/uhandlers) [![Coverage Status](https://coveralls.io/repos/github/WebReflection/uhandlers/badge.svg?branch=master)](https://coveralls.io/github/WebReflection/uhandlers?branch=master) All [µhtml](https://github.com/WebReflection/uhtml#readme) attributes handlers. + +```js +import { + aria, // handle aria attributes + attribute, // handle any generic attribute + data, // handle data attributes via dataset + event, // handle events + ref, // handle ref objects and callbacks + setter // handle direct setters +} from 'uhandlers'; +``` + +# API + +
+ aria + +Given an object, assign all `aria-` attributes and `role` to the node. + +```js +const node = document.createElement('div'); +const ariaHandler = aria(node); +ariaHandler({role: 'button', labelledBy: 'id'}); +node.outerHTML; +//
+``` + +
+ +
+ attribute + +Handle a generic attribute `name`, updating it when its value changes. + +```js +const node = document.createElement('div'); +const attributeHandler = attribute(node, 'test'); +attributeHandler('value'); +node.outerHTML; +//
+``` + +If the passed value is either `null` or `undefined`, the node is being removed. + +```js +attributeHandler(null); +node.outerHTML; +//
+``` + +
+ +
+ data + +Given an object, assign all keys to the node `dataset`. + +```js +const node = document.createElement('div'); +const dataHandler = data(node); +dataHandler({anyKey: 'value'}); +node.outerHTML; +//
+``` + +
+ +
+ event + +Given a `listener` or a `[listener, options]` array, add or remove events listeners whenever different from the previous time. + +```js +const node = document.createElement('div'); +const eventHandler = event(node, 'click'); +eventHandler([e => console.log(e.type), {once: true}]); +node.click(); +// "click" +node.click(); +``` + +
+ +
+ ref + +Add current `node` to `ref.current` or pass `node` to the `callback`. + +```js +const node = document.createElement('div'); +const refHandler = ref(node); +const reference = {current: null}; +refHandler(reference); +reference.current === node; // true +``` + +
+ +
+ setter + +Directly assign any value to a node property. + +```js +const node = document.createElement('div'); +const setterHandler = setter(node, 'className'); +setterHandler('a b c'); +node.outerHTML; +//
+``` + +