Due to the complexity of Github NPM packages, vanilact has migrated to the standard NPM Repository. This means that to install vanilact it's as simple as running the command below!
Play around with vanilact here!
/*
Import vanilact classes! Classes are named after HTML components
and always start with a capital letter
*/
import { Div, P, H1 } from "vanilact"; // Some of the classes available with vanilact
// Define where you want to inject your components
const injectionPoint = document.querySelector("#somewhereToInject");
/*
Create a new Div component and give it a class and id! (all parameters are optional.
If no parameters are needed, constructor needs an EMPTY object)
*/
/*
view required or optional parameters by pressing ctl(or cmd for Mac) + space in VSCode
*/
const newDiv = new Div({ className: "new-class" });
// Create a new heading component with text content and a classname
const newHeading = new H1({ text: "Hello World!", className: "hello-heading" });
// Nest the neading into the newDiv component!
newDiv.addChild(newHeading); // You can keep calling addChild multiple times without errors!
// Add the new component to the DOM!
injectionPoint.appendChild(newDiv.getElement());
Vanilact will NOT work without being built down to ES6 syntax. For that, it is recommended to you a package bundler such as