reactive-toggle-js
v1.0.4
Published
Flexable Vanila Js based toggle button which can hold custom property
Maintainers
yuvalgalReadme
Reactive toggle is a vanila based js package based on es6 concepts
in order to use this package the following please run the following commands :
npm -i --save "package-name" in your project directory.
after installing the package you must use a tool like browserify.. etc in order to compile it down to bundle file which you will then have to include like so :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<link rel="stylesheet" href="./node_modules/reactive-toggle-js/style.css">
<script src="./bundle.js"></script>
</body>
</html>after doing so you going to have to call the "init" function from your script file like so :
let reactiveToggle = require("reactive-toggle");
reactiveToggle.init();to the init function you can pass copule of variables which are the
- True state text to display
- the false text to display
- the current state (0/1) when 0 is false and 1 is true.
- an custom property name (which is a must ) - in order to get incidations back from the toggle
- an custom property value (again..its a must)
- an index, in cases that there is more then 1 toggle in the site, this is a MUST. each one of the toggle must get an unieq id.
- Off state custom color (not a must)
- On state custom color (not a must)
and you can use this component as follows :
let reactiveToggle = require("reactive-toggle-js");
let listArray = Array.prototype.slice.call(document.querySelectorAll("li"));
console.log(listArray);
listArray.forEach((listItem,index) => {
let toggle = reactiveToggle.init("False","True",1,"data-toggle",index,index);
listItem.appendChild(toggle);
});