r-box

r-box is an initiative to create a web component to host your HTML and add reactivity to it.

A 2 KB (minified) custom component that adds reactivity to your HTML just with pure JS, HTML and CSS.
No dependencies
No render-blocking

Uses

<r-box data-bind="dataObject">
    <!-- HTML Template-->
</r-box>

<!--data object to bind with r-box-->
<script>
    var dataObject = { };
</script>

<!--add r-box script-->
<script src="src/r-box.js" defer></script>

Directive

r-box has very few directives to add reactivity to HTML

directive	description
data-bind	associate JS object with r-box
data-*	To add reactivity to the element attribute use `data-*` directive. For example to add a dynamic class you can use `data-class=methodToReturnClass`
react-on	string representation of a list of properties on change of which DOM should adopt the change

Interpolation

use ${yourVariableName} to interpolate the yourVariableName in template. E.g.

<h1>${title}</h1>

Limitation – composite variable interpolation does not work. In the case of complex interpolation use function. E.g.

<h1>${yourFunction}</h1> // yourFunction: () => {return var1 + var2 + var3}

data-*

<input type="text" data-value="yourVariable">

Example

Timer

<r-box data-bind="dataObject">

    <label>${label}</label>
    <input type="text" data-value="time">
</r-box>

<script>
    var dataObject = {

        label: 'Time',
        time: ''
    };

    window.setInterval(() => {
        dataObject.time = (new Date()).toLocaleString();
    }, 1000);
    
</script>
<script src='https://cdn.jsdelivr.net/gh/ranjanngc/r-box/dist/r-box.v0.0.3.es.min.js' type="module"></script>

See example – https://codepen.io/RanjanKr/pen/oNqGvpj

ToDo List

<r-box data-bind="dataObject">

    <ul react-on='["todo"]'>
      ${addList}
    </ul>
    <input type="text" data-value="task">
    <button onclick="dataObject.clickHandler()">Add Task</button>
</r-box>

<script>
    var dataObject = {

        task: '',
        todo: ['Job1', 'Job2'],
        addList: ()=>{
          return dataObject.todo.map((td)=> {
            return `<li>${td}</li>`;
          }).join('')
        },
        clickHandler : () => {
            dataObject.todo.push(dataObject.task);
            dataObject.task = '';
            dataObject.todo = dataObject.todo;
        }
    };
    
</script>
<script src='https://cdn.jsdelivr.net/gh/ranjanngc/r-box/dist/r-box.v0.0.3.es.min.js' type="module"></script>

Enable/Disable

<r-box data-bind="dataObject">
  
  <input type="text" data-disabled="disabled"> 
  <input type="checkbox" data-checked="disabled">
</r-box>

<script>
  var dataObject = { disabled: false };
</script>

See example – https://codepen.io/RanjanKr/pen/ExEwpvP

CDN

Minified

<script src='https://cdn.jsdelivr.net/gh/ranjanngc/r-box/dist/r-box.v0.0.2.min.es.js'></script>

Dev

<script src='https://cdn.jsdelivr.net/gh/ranjanngc/r-box/dist/r-box.v0.0.2.es'></script>

Build

npm run build

License

MIT

GitHub

View Github