Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

dom-effect

1.0.1 • Public • Published

dom-effect 🚀

  • vdom implmentation in just 2 kb of javascript

Example

  • With Elm Like Syntax ( Using functions )
import { render, f } from "dom-effect";
import { className, onClick } from "dom-effect";
 
const first = f(
  "div",
  [className("main-heading"), onClick(_ => console.log("Hi"))],
  ["Hi from vdom", h("h3", [], ["this is cool"])]
);
 
const second = f(
  "div",
  [className("main-heading")],
  ["Hi from vdom", h("h3", [], ["re-rendered"])]
);
 
const $root = document.getElementById("root");
 
render($root, first);
 
setTimeout(_ => {
  render($root, second, first);
}, 5000);
  • Using jsx
import { render, h } from "dom-effect";
 
const first = (
  <div className="main-heading" onClick={_ => console.log("Hi")}>
    {"Hi from vdom"}
    <h3>this is cool</h3>
  </div>
);
 
const second = (
  <div className="main-heading">
    {"Hi from vdom"}
    <h3>re-rendered</h3>
  </div>
);
 
const $root = document.getElementById("root");
 
render($root, first);
 
setTimeout(_ => {
  render($root, second, first);
}, 5000);

Install

npm i dom-effect

DownloadsWeekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

3.63 kB

Total Files

3

Last publish

Collaborators

  • avatar