1.0.0 • Published 2 years ago
reemjs v1.0.0
A very compact and small library that provides reactivity technology to your code, like vue or react.
Playground
Usage
<script src="https://remjs.netlify.app/app.min.js"></script>
Put this code in your head
tag
After you've included the library, add the code below to your body
tag
<button on="click: count++" in>
count is: {count}
</button>
<script>
RemJs.data({ count:0 })
</script>
live preview click
Use special attributes to change the content on the page:
- if - hides or shows the element depending on the condition
if="cond"
example: if="num > 5"
- on - adds listener events to the element
on="event:your_code"
example: on="click:num++"
- in - is used to insert a variable into the text of an element
<p in>{your_code}</p>
example: <p in>your name {userName}</p>
- css - used to style elements
css="css_property:your_code"
example: css="color: isValid ? 'green' : 'red'"
- bind - use to bind some element value to a variable
bind="element_property:your_code"
example: <input bind="value: userName>"
To change variables through a script, use the object that will return data()
<h1>
color is:
<span css="color:color" in>
{color}
</span>
</h1>
<script>
const dt = RemJs.data({ color:'red' })
setTimeout(()=>{ dt.color = 'blue' }, 1000)
</script>
live preview click
1.0.0
2 years ago