jero
v1.0.26
Published
**jero** is a lightweight JavaScript library that allows you to easily create custom HTML elements (web components) with built-in state management, event handling, and intersection observer support. This library is perfect for building reusable and intera
Downloads
837
Maintainers
muyi11451Readme
jero
jero is a lightweight JavaScript library that allows you to easily create custom HTML elements (web components) with built-in state management, event handling, and intersection observer support. This library is perfect for building reusable and interactive UI components in vanilla JavaScript.
Features
- Custom Elements: Effortlessly define and register custom HTML elements.
- State Management: Manage component state using the
setStatemethod with automatic re-rendering. - Event Handling: Simplified event listener setup using
data-onattributes. - Two-Way Data Binding: Bind input values to component state using
data-bind. - Lifecycle Events: Execute code when the component enters or leaves the viewport with Intersection Observer.
Installation
NPM
Install the library via npm:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jero.js"></script>
NPM
Install the library via npm:
npm install jeroUsing this library with cdl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jero Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jero.js"></script>
</head>
<body>
<my-custom-component data-message="Hello from Attribute"></my-custom-component>
<script>
jero.withCustomElement('my-custom-component', function (component) {
return function MyComponent(component) {
component.state = { message: "Hello, World!" };
component.handlePageEnter = () => {
console.log("Page entered.");
};
component.handlePageLeave = () => {
console.log("Page left.");
};
component.handleUpdateButtonClick = function () {
this.setState({ message: "Hello from the updated state!" });
};
return () => `
<div>
<h1>${component.state.message}</h1>
<input type="text" data-bind="message" />
<button data-on="click: handleUpdateButtonClick">Update Message</button>
<p>Attribute value: ${component.getAttributeData("data-message") || "N/A"}</p>
</div>
`;
};
});
</script>
</body>
</html>
Creating custom component with a plain function
import withCustomElement from 'jero';
function MyComponent(component) {
// Initialize component state
component.state = { message: "Hello, World!" };
// Define lifecycle methods
component.handlePageEnter = () => {
console.log("Page entered.");
};
component.handlePageLeave = () => {
console.log("Page left.");
};
// Define event handlers
component.handleUpdateButtonClick = function () {
this.setState({ message: "Hello from the updated state!" });
};
// Render the component's HTML
return () => `
<div>
<h1>${component.state.message}</h1>
<input type="text" data-bind="message" />
<button data-on="click: handleUpdateButtonClick">Update Message</button>
<p>Attribute value: ${component.getAttributeData("data-message") || "N/A"}</p>
</div>
`;
}
// Register the custom element
withCustomElement("my-custom-component", function (component) {
return MyComponent(component);
});