Svelte Ticker Board
A Svelte component for an airport-like ticker board display.
Ticker Board
https://github.com/Fruup/svelte-ticker-board/assets/55341374/cdb2fe16-198b-4aba-b0a2-61c23b2099db
Usage
The privided type declarations should give enough information about library's parameters. There are two intended ways to use the component:
As a Svelte component
<script>
import Board from 'path/to/component/Board.svelte'
const words = ['Hello', 'World']
</script>
<Board {words} duration={7500} durationPerLetter={150} />
As plain JS
You can compile the Svelte component to plain JavaScript using rollup:
pnpm run rollup
This generates a .js and a .css file in the output folder which can be imported into your project:
// createBoard.js
import { Board } from 'path/to/output/index.js'
// Wait for the target element to be accessible.
document.addEventListener('DOMContentLoaded', () => {
// Instantiate the component. Your IDE should be able to provide type information here.
new Board({
target: document.querySelector('#target'),
props: {
words: ['Hello', 'World'],
durationPerLetter: 150,
duration: 7500,
},
})
})
<!-- index.html -->
<html>
<head>
<!-- Import the compiled style sheet. -->
<link rel="stylesheet" href="path/to/output/index.css" />
<!--
Use module type as the bundle is compiled for ES module syntax.
This can be customized in rollup.config.js.
-->
<script type="module" src="createBoard.js"></script>
</head>
<body>
<div id="target" />
</body>
</html>
