You can add kofi to your project using NPM:
$ npm install --save kofi
The kofi package can be used via modules:
<script type="module">
import kofi from "https://unpkg.com/kofi/kofi.js";
</script>Creates a new VDOM Node element of the specified type, with the specified props and children.
kofi("div", {"align": "center"}); // --> <div align="center"></div>
kofi("div", {}, "Hello world"); // --> <div>Hello world</div>This method does not return a DOM element. It returns a Virtual DOM Node element, which is a JSON representation of the DOM element.
To transform it into a real DOM element, use kofi.render.
The type argument can be either a tag name string (such as "div" or "a") or a function.
//Using a tag name
kofi("a", {"href": "https://google.es"}, "Click me!");
//Renders to: <a href="https://google.es">Click me!</a>
//Using a function
const Welcome = (props, children) => {
return kofi("span", {}, `Hello ${props.name}`);
};
kofi(Welcome, {"name": "Bob"});
//Renders to: <span>Hello Bob</span>The props argument is an object with the data of the element. This can include HTML attributes, events listeners or custom properties that our functional element will use.
kofi("div", {
"className": "button",
"onclick": event => { /* Handle click event */ },
"id": "button1",
});Use the className property to set the CSS class.
kofi("div", {"className": "button"}, "Button");Attach a callback listener to an event.
kofi("div", {
"onclick": event => { /* Handle click event */ },
"onmousedown": event => { /* Handle mouse down event */ },
"onmouseup": event => { /* Handle mouse up event */ },
});You can provide an object with the style of the element. All styles attributes should be in camel-case format.
kofi("div", {
style: {
backgroundColor: "blue",
color: "white",
},
align: "center"
}, "Hello");You can use the babel's plugin @babel/plugin-transform-react-jsx for creating DOM elements using JSX.
This example using JSX:
/** @jsx k */
import k from "kofi";
const user = (
<div>
<img className="avatar" src="/path/to/user.png" />
<span>Hello user</span>
</div>
);Compiles to:
/** @jsx k */
const k = require("kofi");
const user = k("div", null,
k("img", {"className": "avatar", "src": "/path/to/user.png"}),
k("span", null, "Hello user"),
);Renders a VDOM Node to the DOM.
const el = kofi("div", {}, "Hello world!");
kofi.render(document.getElementById("root"), el);The first argument is the parent DOM element, and the second arguments is the VDOM Node to render. Returns a reference to the rendered DOM element.
Executes the provided function fn when the DOM becomes ready. This utility is similar to jQuery's ready method.
//Execute this function when the DOM is ready
kofi.ready(() => {
console.log("DOM is ready");
});A tiny utility for conditionally joining classNames. This function takes any number of arguments which can be an string, an object or an array. When providing an object, if the value associated with a given key is truthly, that key will be included in the generated classNames string. Non string values will be also ignored.
kofi.classNames("foo", "bar"); // -> "foo bar"
kofi.classNames("foo", null, false, "bar"); // -> "foo bar"
kofi.classNames("foo", ["bar", null]); // -> "foo bar"
kofi.classNames({
"foo": true,
"bar": false,
}); // -> "foo"kofi is released under the MIT LICENSE.
