cyclejs-modal's Introduction

cyclejs-modal

An easy way to open custom modals in a cyclejs app

Documentation is hosted on Github Pages

Use it

npm install --save cyclejs-modal

Example

You can find the examples in the examples/ folder

Since Version 5.2.0 you can also pass the sources to the created modal. This allows the modal to access the isolation scope of its creation place. Take a look at the onionify example to see this in action.

Since Version 5.3.0 modals can be closed by clicking on the gray overlay. You can disable that in the open message:

{
    type: 'open',
    component: MyModal,
    backgroundOverlayClose: false
}

function main({ DOM }) {
    return {
        DOM: xs.of(button('.button', ['open modal'])),
        modal: DOM.select('.button').events('click')
            .mapTo({
                type: 'open',
                component: isolate(modal, 'myscope')
            } as ModalAction)
    };
}

function modal({ DOM }) {
    return {
        DOM: xs.of(div('.div', [
            span('.span', ['This is a modal. Yeah? :)']),
            button('.button', ['close'])
        ])),
        modal: DOM.select('.button').events('click')
            .mapTo({ type: 'close' } as ModalAction)
    };
}