REFLEX

Reflex adds reactivity to build-in HTML elements. It works like Vue and React, but the Reflex filesize is only 3kb. Reflex is based on web components – more precisely customized built-in elements.

Why Reflex?

- Light, fast and simple
- Minimalistic API
- Global state _(get and set data easily at the site wide)_
- No CLI
- No compiler
- No virtual DOM

DEMO: https://codepen.io/raneio/full/bGVbrLw

NPM: https://www.npmjs.com/package/@raneio/reflex

---

Get started

``javascript
import 'https://cdn.skypack.dev/@ungap/custom-elements-builtin?min' // Polyfill for Safari
import Reflex from "https://cdn.skypack.dev/@raneio/reflex?min";

// You can also install Reflex and polyfill locally
// npm install @raneio/reflex @ungap/custom-elements-builtin

window.reflex = new Reflex({
elements: ["h3", "div", "img", "input"],
state: {
title: "Awesome monkeys!",
titleUpperCase: "",
subtitle: "Everyone loves monkeys.",
showExample: true,
animals: [
{
name: "Monk",
photo: "https://source.unsplash.com/Z05GiksmqYU/150x150",
},
{
name: "Twins",
photo: "https://source.unsplash.com/aXqlZFeVFrU/150x150",
},
{
name: "Jon Snow",
photo: "https://source.unsplash.com/iJ7cD_VocxE/150x150",
},
],
},
});
`

text / html

`html


`

> ### Awesome monkeys!
>
> Everyone loves monkeys.

:attribute

`html

`

> !Monk

for

`html



`

> !Monk !Twins !Jon Snow

show

`html



`

set()

`javascript
reflex.set("title", "Monkeys are awesome!");
`

`html
is="x-input"
:value="title"
oninput="reflex.set(this.path.value, this.value)"
/>
`

get()

`javascript
const title = reflex.get("title");
// or
const title = reflex.state.title;
`

observe()

`javascript
reflex.observe({
path: "title",
handler: (newValue, oldValue) => {
reflex.set("titleUpperCase", newValue.toUpperCase());
},
immediate: true,
});
`

`html


``

> Monkeys are awesome!
> MONKEYS ARE AWESOME!

Package update guide

https://docs.npmjs.com/updating-your-published-package-version-number

License

MIT

Copyright 2021, Rane Ahonen, Rane.io