poke-js

A small reactivity system

Usage

Import poke-js by including the following script tag in your HTML:

<script src="https://unpkg.com/poke-js"></script>

The global variable Poke is now available with the init & watch methods. Use these to initialize your data object and add 'watcher' functions to be run whenever any of their data dependencies are updated.

const { init, watch } = Poke

let data = { price: 5, quantity: 2 }
init(data)

// total output
const totalOutput = document.getElementById('totalOutput')
watch(() => totalOutput.innerText = data.price * data.quantity)

In this example, any changes to the price or quantity properties of data, will update the DOM element with the id totalOutput.

The properties of the data passed to Poke.init() are also easily bound to the value & innerText of DOM elements by using the data-bind attribute.

Price: <span data-bind="price"></span>

Furthermore, poke-js will listen to input events on any element with the data-input attribute and reflect the change in the corresponding data value.

<input data-input="quantity" type="number" />

To see an example of all of this working together, check out this CodeSandbox.

Browser compatibility

| Firefox | Chrome | Opera | Edge | |:-------:|:--------:|:------:|:-----:| | ✅ | ✅ | ✅ | ✅ |

Contributing

This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the issues. If you wish to work on this project:

1. Fork the project
2. Create your feature branch (git checkout -b new-feature-branch)
3. Commit your changes (git commit -am 'add new feature')
4. Push to the branch (git push origin new-feature-branch)
5. Submit a pull request!