[Live Demo](https://delete-agency.github.io/dc/)
$ npm install @deleteagency/dc
`
Usage
`js
// collapsed/collapsed.js
import { DcComponent } from '@deleteagency/dc';
class CollapsedComponent extends DcBaseComponent {
static namespace = 'collapsed';
static requiredRefs = ['button', 'content'];
init = () => {
console.log('CollapsedComponent was instantiated on the element', this.element);
console.log('Options', this.options);
console.log('Refs', this.refs);
this.addListener(this.refs.button, 'click', this.onClick);
}
onClick = () => {
if (this.refs.content.classList.contains('show')) {
this.refs.content.classList.remove('show');
} else {
this.refs.content.classList.add('show');
}
}
}
// collapsed/index.js
import './scss/index.scss';
import { dcFactory } from '@deleteagency/dc';
import CollapsedComponent from './collapsed.js';
dcFactory.register(CollapsedComponent);
// later after registering all your components, when your page is ready
dcFactory.init(document.body);
`
API
$3
#### componentClass
Required
Type: typeof DcBaseComponent
Class which inherits DcBaseComponent and will be instantiated
#### selector
Optional
Type: string | CallableFunction: HTMLElement[]
CSS selector which will override searching by getNamespace() and be used for searching elements of given componentClass.
$3
Starts the factory on a given root: finds and creates all registered components within the root
#### root
Optional
Type: HTMLElement
#### withLazy
Optional
Type: boolean
Defines whether or not components which are marked as lazy should be created during this particular initialization.
To mark components as lazy you need to add data-dc-lazy attribute on its element or any of its parent elements
$3
Destroy all previously registered components within the passed element
#### root
Required
Type: HTMLElement`