It is cover for [html-js](https://www.npmjs.com/package/@vovikilelik/html-js) utils.

# Abstract
The `use-html` package includes a react hook that allows you to access an HTML element and a set of [html-js](https://www.npmjs.com/package/@vovikilelik/html-js) utilities for manipulating the DOM.

## Links
* [html-js](https://www.npmjs.com/package/@vovikilelik/html-js) utils package.
* [Wiki](https://wiki.dev-store.xyz/use-html) documentation.
* [Git repository](https://git.dev-store.xyz/Clu/use-html).

## Features
* Manipulation with DOM.
* Call to clear function before new rendering.

For more features see [html-js](https://www.npmjs.com/package/@vovikilelik/html-js) library.

# Example
You can use the `useHtml` hook to access a DOM element. The `builder` function implements element management. Inside you can use the [html-js](https://www.npmjs.com/package/@vovikilelik/html-js) utility.

```ts
export const Component: React.FC = () => {
  const ref = useHtml(element => { /* DOM manipulations */ });
  
  return <div ref={ref} />;
};
```

`useHtml` accepts a method that can return a cleanup function.

```ts
const builder: HtmlBuilder<HTMLDivElement> = element => {
  const unsubscriber = subscribe(element, {
    click: () => console.log('Click')
  });

  /* DOM manipulations */

  return unsubscriber;
};

export const Component: React.FC = () => {
  const ref = useHtml(builder);
  
  return <div ref={ref} />;
};
```

# Uses
This package contains several hooks that will help you access DOM elements:
* `useHtml()` - base hook.
* `useLayoutHtml()` - like `useLayoutEffect()`.

Its usage is similar to `useRef()`.

```ts
const builder = () => { ... };

export const Component: React.FC = () => {
  const ref = useHtml(builder);
  
  return <div ref={ref} />;
};
```

The `builder` function is passed as an argument, which implements DOM manipulation and returns a cleanup function.

```ts
const builder: HtmlBuilder<HTMLDivElement> = element => {
  /* DOM manipulations */
  return () => { /* clean function */ };
};
```

You can pass multiple builders as an array.

```ts
const ref = useHtml([builder1, builder2, builder3]);
```

Transferred builder need to be memoized or store in variable.

```ts
const builder = () => { ... };
/* or const builder = [builder1, builder2, builder3]; */

export const Component: React.FC = () => {
  const ref = useHtml(builder);
  ...
};
```

You can also pass dependencies as the second argument, if necessary.

```ts
const ref = useHtml(builder, [deps1, deps2]);
```

Lastly, use the [html-js](https://www.npmjs.com/package/@vovikilelik/html-js) utility in builders.