About The Project And Our Goals And Achievements

This lib is developed for a project called "Laniakea" (the animation and site content builder) and for a research purpose

Achievements

1. Reconciliation algorithm; 2. Public and Shadow DOM; 3. State hook

Benefits you get: small size

This landing page is built by that lib

Warnings

currently supported hooks: useState, useRef, useEffect (only one fn per component in ver 1.0.3)

How Can You Start Off

The easiest way is just clone the project from the git, install all dependencies by typing in console "yarn" and do you own

Some Examples and Features:

Array Of Elements:

Example Of Code:

import React from "laniakea-core-ts";

const ArrayComponent = () => {
return (<div>{[<div>Element 1</div>, <div>Element 2</div>]}</div> );

export default ArrayComponent;

Component

What Do We Get:

Element 1

Element 2

Class Component:

Example Of Code:

import React, { Component } from "laniakea-core-ts";

interface IProps {
  text: string;
}

class ClassComponent extends Component<IProps> {
  state = { done: false };

  onBtnClick = () => {
    this.setState({ done: !this.state.done });
  };

  getBg = () => (this.state.done ? "green" : "red");

  render() {
    return (<divclassName="innr-el mod-regular"><divclassName="innr-el mod-red">{this.props.text}</div><b>onClick: false|true:</b><buttonclassName="btn-el mod-header"
onClick={this.onBtnClick}
style={{ background: this.getBg() }}>
{this.state.done.toString()}
</button></div>    );
  }
}

export default ClassComponent;

Component

Try out

'text out of props'

onClick: false|true:

More Then One useState and useRef Hooks

Example Of Code:

import React, { useRef, useState } from "laniakea-core-ts";

const MultState = () => {
const [st, setSt] = useState("");
const [counter, setCounter] = useState(1);

const inpRef = useRef<HTMLInputElement>(null);
const divRef = useRef<HTMLInputElement>(null);

const changing = (val: string) => {
  console.log(divRef.current);
  console.log(inpRef.current);
  setSt(val);
}

const changeCounter = () => setCounter((prev: number) => prev + 1);

return (<divref={divRef}><span>{st === "hello" && st}</span><inputref={inpRef}
type="text"
onInput={(e: any}) => changing(e.target.value})}
placeholder="text hello here"
value={st}></input><buttononClick={changeCounter}
className="counter-btn-el mod-brRed-clrWht">
{counter.toString()}
</button></div> );
};

export default MultState;

Component

Try out

Fragments

Example Of Code:

import React, { useState } from "laniakea-core-ts";

const FragmentWithStateHook = () => {
const [st, setSt] = useState(1);
const [st2, setSt2] = useState(1);
const changing1 = () => setSt((prev: number) => prev + 1);
const changing2 = () => setSt2((prev: number) => prev + 1);
return (
  <>
    <div>the first div</div>
    <button
        onClick={changing1}
        className="counter-btn-el mod-brRed-clrWht"
    >
        {st.toString()}
    </button>
    <button
        onClick={changing2}
        className="counter-btn-el mod-brRed-clrWht"
    >
        {st2.toString()}
     </button>
     <div>the last div</div>
  </>
);
};

export default FragmentWithStateHook;

Component

Try out

the first div

the last div

Old Style Code Component

Example Of Code:

import React, { useRef, useState } from "laniakea-core-ts";

const simpleElement = React.createElement("div", null, "some div element");

const OldStyleMakingCode = React.createElement(
  "div",
  {
    className: first,
    style: {
      background: "#ddd",
      marginTop: "10px",
      padding: "10px",
      borderRadius: "4px",
    },
  },

  React.createElement("h1", { style: { color: "white" } }, "Header"),
  '<script>alert("a-a-a-ale-e-e-ert")</script>',
  simpleElement,
  1,
  0,
  undefined,
  null,
  // {}, // not allowed

  React.createElement(
    "div",
    { className: second },
    "без тега",
    React.createElement(alert, "alllllerrrt!!!"),
    React.createElement("div", { className }),
    "fragment hi"
  ),

  React.createElement(
    "div",
    { className: "fourth", contentEditable: "true" },
    "editable"
  ),

  "another one"
);

export { ArrayComponent };

Component

What We Get:

Header

some div element

без тега

fragment hi

editable

another one