➤ Welcome to vanilact!

➤ Update!

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!

vanilact will be taken off the github npm repository!

To install as a dependency, run: npm install --save vanilact

Play around with vanilact here!

How to use?

/*
  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