Interactive board is the lightweight (without dependencies) plugin to offer mouse interaction with your users.
Getting started | Documentation | Demos
With yarn
yarn add devcut/interactive-board
With CDN
<script src="https://cdn.jsdelivr.net/npm/interactive-board/lib/interactive-board.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/interactive-board/lib/interactive-board.min.css">or manual download.
3 possibilities to install the plugin :
- import
- require
- or by file include
import InteractiveBoard from 'interactive-board';const InteractiveBoard = require('interactive-board');Link interactive-board.min.js in your HTML :
<script src="interactive-board.min.js"></script>Link interactive-board.min.css in your CSS :
<link rel="stylesheet" href="interactive-board.min.css">Add this div in your html template
<div class="interactive-board"></div>Call init function to start the process
let ib = new InteractiveBoard({});
ib.init();You can change the default configuration :
let ib = new InteractiveBoard({
board: {
element: '.interactive-board', // Selector of board
width: '100%', // Default width
height: '100vh', // Default height
background: '#000000' // Default background
},
// Change color of random shape
activateRandomShape: {
enabled: true,
time: 200, // Interval before change color of another shape
duration: 3000 // Duration of color
},
colors: [], // Set here (in hex) different colors of boards. If array is empty, random color is choiced
shape: {
width: 18, // Default width of each shape
height: 18, // Default height of each shape
margin: 2, // Default margin
background: '#1d1d1d' // Default color of shapes
},
// When user click on any shape, make a little pulse
pulse: {
enabled: true
}
});
ib.init();