@frukmruk/state v0.1.12

1. Quick start

import React from "react";
import { useFrukState } from ".";

const Comp = ({ anyProp = 1 } = {}) => {
  const state = useFrukState({ anyProp });

  return (
    <div>
      <button
        onClick={() => {
          state.anyProp = state.anyProp + 1;
        }}
        data-testid="#1"
      >
        Click me
      </button>
      <span data-testid="#2">
        Jello from comp {state.anyProp} {JSON.stringify(state)}
      </span>
    </div>
  );
};

somewhere in App.js

...

return <Comp />

...

2.1. Combining with @frukmruk/html

import { fruktal } from "@frukmruk/html";
import { useFrukState } from "@frukmruk/state";

import "./App.css";

const App = () => {
  const state = useFrukState({ title: "Heading" });

  return (
    <>
      {fruktal`


        =========================================


        div#main
        ---------------------------------------
        :class flex flex-col md:flex-row md:flex-wrap
        :class justify-start
        :class p-4
        :class w-screen 
        :class min-h-screen
        ---------------------------------------


        =========================================

            div#heading
            ---------------------------------------
            :class mb-6 p-2
            :class h-16 md:w-full
            :class text-2xl
            ---------------------------------------
                #${state.title}
            ---------------------------------------

      `}
    </>
  );
};

export default App;

2.2. Combining with @frukmruk/html events

https://codesandbox.io/s/frukmruk-state-event-example-dlf2lu

import { fruktal } from "@frukmruk/html";
import { useFrukState } from "@frukmruk/state";

import "./App.css";

const App = () => {
  const state = useFrukState({ title: "Heading" });

  const onButtonClick = () => {
    console.log({ msg: "Button clicked" });
  };

  return (
    <>
      {fruktal`


        =========================================


        div#main
        ---------------------------------------
        :class flex flex-col md:flex-row md:flex-wrap
        :class justify-start
        :class p-4
        :class w-screen 
        :class min-h-screen
        ---------------------------------------


        =========================================

            div#heading
            ---------------------------------------
            :class mb-6 p-2
            :class h-16 md:w-full
            :class text-2xl
            ---------------------------------------
                ${state.title}
            ---------------------------------------

        =========================================
            
            button#mybutton
            :class bg-blue-200
            :onClick ${onButtonClick}
                My button


          =========================================


      `}
    </>
  );
};

export default App;