@roukara/nodo
Version:
A class designed to facilitate the manipulation of DOM elements within web pages.
64 lines (44 loc) • 1.96 kB
Markdown
# /nodo
`/nodo` is a class designed to facilitate the manipulation of DOM elements within web pages. It serves as a base class, allowing for easy selection and manipulation of DOM elements, class management, and maintaining references to child elements through props.
## Features
- Simple selection and manipulation of DOM elements.
- Management of references and event listeners through props.
## Installation
Install `/nodo` using npm:
```bash
npm install /nodo
```
## Usage
Below is an example of how to use /nodo as a base class to create a more specific component class that adds custom functionality and handles events through props.
```ts
import Nodo from '@roukara/nodo';
type ButtonProps = {
onClick: () => void;
};
// Extend Nodo to create a custom button component
class ButtonComponent extends Nodo<HTMLButtonElement> {
constructor(selector: string, props?: ButtonProps) {
super(selector, props);
this.el.addEventListener('click', this.handleClick.bind(this));
}
handleClick() {
this.props.onClick();
}
}
// Use the ButtonComponent with an onClick prop
const button = new ButtonComponent('button', {
onClick: () => console.log('Button clicked!')
});
```
## Properties
`el: HTMLElement`
The DOM element that this Nodo instance is associated with.
`props: NodoProps`
An object containing optional properties for the Nodo instance, such as event handlers and other settings.
`refs: { [key: string]: HTMLElement | HTMLElement[] }`
An object containing references to child elements of the Nodo instance's element. The keys are the `data-ref` attribute values of the child elements.
## API
`constructor(selector: string | HTMLElement, props?: NodoProps)`
Initializes a Nodo instance with the specified data-el value or DOM element. Optional properties can include event handlers and other settings.
## License
This project is released under the ISC License.