Tutorials

How to create custom providers

Containers supply the behavior and providers supply the content. Every container is linked to exactly one provider and its task is to insert content into the container. In this example we create a custom provider that loads random 300x300 images from Lorem Picsum.

Setup
adk.container.addProvider('my-provider', {
    load: ({ elem }) => {
        elem.innerHTML = '<img src="https://picsum.photos/300/300">'
    },
    unload: ({ elem }) => {
        // do cleanup stuff
    },
})

adk.config()
    .addContainer('my-container', adk.container.config()
        .provider('my-provider'))
    .apply()
    .init(publisherId)
Result