Intuitive Reactivity, Simplified State.

Embrace a modern UI framework that simplifies component design. With Rezact, you get the power of reactivity without the boilerplate.

No Hooks or Rules

No hook rules... create and use signals ANYWHERE in your code.

Stores

State Management has never been easier than this. Just start with a simple module and some signals.

export const userStore: any = {
  $isLoggedIn: false,
  $userName: "",
  $email: "",
};

export function logIn(data) {
  userStore.$isLoggedIn = true;
  userStore.$userName = data.username;
  userStore.$email = data.email;
}

export function logOut() {
  userStore.$isLoggedIn = false;
  userStore.$userName = "";
  userStore.$email = "";
}

Built in Router

No need to install an external dependency, Rezact comes with a built in router that is easy to use.

import { useRouter } from "rezact/router";
import { Page as FourOhFour } from "./Pages/404";

const router = useRouter();

router.addRoute("/404", FourOhFour);

const routes = [
  {
    path: "/",
    component: () => import("src/Pages/LandingPage"),
    dataLoader: () => {} // COMING SOON!
    title: "Rezact",
  },
  {
    path: "/docs",
    component: () => import("src/Docs/PageOne.mdx"),
    dataLoader: () => {} // COMING SOON!
    title: "Rezact",
  },
  {
    path: "/users/:userId",
    component: () => import("src/Pages/Users"),
    dataLoader: () => {} // COMING SOON!
    title: "Rezact Users",
  },
];

router.addRoutesFromConfig(routes);

export { router };

Easy Forms

Forget everything you know about creating forms in react... Literally, forget it all. This is the easiest way to create forms. PERIOD.

import { Form } from "./Form";
import { Btn } from "./Buttons";
import { Input } from "./ValidatorInput";

export function LandingForm() {
  const submit = (data) => {
    console.log(data); // { email: "[email protected]" }
  };

  return (
    <Form onSubmit={submit}>
      <Input name="email" placeholder="Email" />
      <Btn type="submit">SubmitBtn>
    Form>
  );
}

Oh, you want validation?

Ok, here's a form with validation.

import { Form } from "./Form";
+import { Input } from "./ValidatorInput";

export function LandingForm() {
  const submit = (data) => {
    console.log(data); // { email: "[email protected]" }
  };

  return (
    

-     
+     
      Submit
    
  );
}

What!?!??! You also want masking and input value restrictions?

Fine... 😏

import { Form } from "./Form";
import { Input } from "./ValidatorInput";
+import { luhnCheck } from "./validators";

export function LandingForm() {
  const submit = (data) => {
    console.log(data); // { email: "[email protected]" }
  };

  return (
    

      
+      
+        exactLength={10}
+        mask="(___) ___ ____"
+        dataAccept={/[\d]/}
+        showFullMaskWhileTyping
+        validateUnMaskedValue
+        name="telephone"
+      />
+      
+        minLength={15}
+        maxLength={16}
+        customValidator={luhnCheck}
+        unmaskInputValueProp
+        mask=".... .... .... ...."
+        maskSlots="."
+        dataAccept={/[\d]/}
+        name="credit-card"
+      />
      Submit
    
  );
}