Vikk NPM | npm.io

Nonreactive JS library

:zap: Zero Dependencies :zap:

Getting Started

npx vikk-app project

Options

npx vikk-app # in current folder
npx vikk-app -js # javascript
bunx vikk-bun # using bun

Usage

function App() {
    return <div> Hello from Vikk </div>
}
document.body.append(<App />)

Attributes

<div style="color: red"> Hello </div>

Events

const f = (text) => alert(text)

<div onclick={() => f("Hi")}> Click Me </div>

Arrays

<div> {[1, 2, 3].map(i => <div> {i} </div>)} </div>

Ternaries

<div> {true ? <div> Hello </div> : null} </div>

Nested elements

const inner = <div> Hello </div>

<div> {inner} </div>

Style object

const style = { color: "red" }

<div style={style}> Hello </div>

Components

Using element

function Component({ state }) {
    return <div> {state.data} </div>
}

function App() {
    const state = { data: "hello" }
    return <div>
        <Component state={state} />
    </div>
}

Element with multiple params

function Component({ param1, param2 }) {
    return <div> {param1} {param2} </div>
}

function App() {
    return <div>
        <Component param1="hello" param2="world" />
    </div>
}

Element with children

function Component({ state }, children) {
    return <div>
        {state.data}
        {children}
    </div>
}

function App() {
    const state = { data: "hello" }
    return <div>
        <Component state={state}>
            <div> child1 </div>
            <div> child2 </div>
        </Component>
    </div>
}

Using function call

function Component(state) {
    return <div> {state.data} </div>
}

function App() {
    const state = { data: "hello" }
    return <div>
        {Component(state)}
    </div>
}

Examples

Todo list

function App() {
    const input = <input />
    const list = <ul></ul>
    const add = () => list.prepend(<li> {input.value} </li>)
    const btn = <button onClick={add}> Add </button>
    return <div> {input} {btn} {list} </div>
}
document.body.append(<App />)