Evolution-based components.


Mixins are a core feature of DNA. Aiming to define components as a simple and augmentable ES2015 classes, they are function that can enrich the component's prototype with properties, features, methods and configurations. The BaseComponent class is built using core mixins too.

Implementing a lite version of Justin Fagnani's mixwith library, DNA components are completely modular and it is easy to reuse code or plug-in features like Drag&Drop, Form validation and more.

Thanks to this strategy, mixins act on the prototype chain of the class, without replacing any method or property and without breaking the use of super.

Define a mixin

Mixins are function which receive a class to augment param and returns a new class with extended prototype.

export default (SuperClass) => class extends SuperClass {
    get myCustomProperty() {
        return ...;
    myCustomMethod() {


The better way to use those functions is the mix helper exported by DNA, which let you to extend the base class with a list of mixins.

import { mix, BaseComponent } from '@dnajs/idom';
import myCustomMixin from './mixins/my-custom-mixin.js';
import anotherMixin from './mixins/another-mixin.js';

export class MyComponent extends mix(BaseComponent).with(myCustomMixin, anotherMixin) {