Skip to main content

Introduction

Crown State is a lightweight state management library. Just listens to state and sends changes to page or component that attach

Installation​

Crown State is available as a package on NPM and YARN:

# NPM
npm install crown-state
# YARN
yarn add crown-state

Create a global state object​

Create a new global state and export it, you can use with type and initial values

// user-state.ts

import State from "crown-state";

//State Type
type UserType = {
  age: number;
  name: string;
};

export const $user = new State<UserType>({
  age: 27,
  name: "Selçuk",
});

Listen the state​

import { $user } from "../user-state";
import { Attachment } from "crown-state";

/**
 * This method attaches to the relevant state and returns an Attachment
 * type value. In case of any change on this state, both current state
 * and previous state values can be accessed via the callback method.
 */
const att = (Attachment = $user.attach((value, previousValue) => {
  console.log(value);
  console.log(previousValue);
}));

/**
 * If you don't want to listen to the changes on this state,
 * you can use the detach method.
 */
att.detach();

Update the state​

import { $user } from "../user-state";

// To update the state just pass the values to the update method
$user.update({
  name: "changed name",
  age: 28,
});

// If you want to change only one field in state
$user.update({
  ...$user.value, // value gives you the current state value
  name: "changed name",
});

Basic demo​