This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

Demo linker

Annotate UI components and link them to wherever you want.

This is mostly useful for linking components in any view to their related documentation, section in a living style guide, etc.

Usage

Include demo-linker.css and demo-linker.js at the end of your page:

<link  href="path/to/demo-linker.css" rel="stylesheet">
<script src="path/to/demo-linker.js"></script>

Start demoLinker with a mapping.

<script>
window.demoLinker(
    /* mapping */ {
        '.navbar': {
            name: 'Navbar',
            url: 'https://getbootstrap.com/components/#navbar'
        },
        '[data-toggle="collapse"]': {
            name: 'Collapse',
            url: 'https://getbootstrap.com/javascript/#collapse'
        }
    }
);
</script> 

Or the URL of the mapping:

<script>
window.demoLinker('path/to/mapping.json');
</script> 

Additionally you can pass options, like a baseUrl or rainbow

<script>
window.demoLinker(
    /* mapping */ {
        '.navbar': {
            name: 'Navbar',
            url: 'components/#navbar'
        },
        '[data-toggle="collapse"]': {
            name: 'Collapse',
            url: 'javascript/#collapse'
        }
    },
    /* options */
    {
        baseUrl: 'https://getbootstrap.com/',
    /* add rainbow colored outlines */
        rainbow: true
    }
);
</script> 

Or

<script>
window.demoLinker('path/to/mapping.json', { baseUrl: 'https://getbootstrap.com/' });
</script> 

License

MIT licensed © De Voorhoede