# ReactiveLazyComponent

Table of Contents

###### Examples

Basic Usage

###### JavaScript Reference

Constructor
Requirements
Attributes
Properties
Methods

### Description

The `ReactiveLazyComponent` class extends the LazyComponent class and provides additional functionality to automatically re-render the component when specified attributes change.

### Basic Usage

Extend the `ReactiveLazyComponent` class to create a component that automatically re-renders when specified attributes change and only renders its content when it becomes visible in the viewport.

    import ReactiveLazyComponent from 'kempo';
    class MyReactiveLazyComponent extends ReactiveLazyComponent {
      constructor(){
        super();
        // Your Constructor
      }
      static get renderOnChange(){
        return ['my-attr'];
      }
      async render(force){
        if(await super.render(force)){
          // Your render logic
          return true;
        }
        return false;
      }
    }
    window.customElements.define('my-reactive-lazy-component', MyReactiveLazyComponent);

## JavaScript Reference

### Constructor

###### Extends LazyComponent

##### `new ReactiveLazyComponent()`

### Requirements

- LazyComponent

### Attributes

The `ReactiveLazyComponent` class does not introduce any new attributes beyond those provided by the LazyComponent class.

### Methods

##### `attributeChangedCallback(n, oV, nV): void`

Overrides the `attributeChangedCallback` method to automatically re-render the component when specified attributes change.

### Properties

##### `static renderOnChange: Array`

An array of attribute names that should trigger a re-render when they change. This property should be overridden in your component class.