cyclejs-modal
cyclejs-modal
npm i cyclejs-modal
cyclejs-modal

cyclejs-modal

An easy way to open custom modals in a cyclejs app

by cyclejs-community

7.0.0 (see all)License:MITTypeScript:Built-In
npm i cyclejs-modal
Readme

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)
    };
}

Try it

Clone it, run npm i && npm run examples

Downloads/wk

6

GitHub Stars

12

LAST COMMIT

4yrs ago

MAINTAINERS

1

CONTRIBUTORS

8

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
7.0.0
latest
4yrs ago
6.0.0-beta.0
beta
4yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate