State manager for react using observer pattern and a custom hook.
https://www.npmjs.com/package/centinel
- Less than 1Kb minified
- Simple
- Fast Dev Experience
- Dev full controll
Install centinel with npm, bun...
npm install centinelFirst define your variables inside a ts file
You can use composable objects
import { Observable } from "centinel";
export const newExam = {
name: new Observable<string>(""),
description: new Observable<string>(""),
selectedSubjectName: new Observable<string>(""),
selectedTeacherIDS: new Observable<string[]>([]),
questions: new Observable<Question[]>([]),
};Or with just simple variables Or Both Or ANYTHING YOU WANT
import { Observable } from "centinel";
export subjects = new Observable<Subject[]>([])
export isQuestionDirty = new Observable<boolean>(false)import { useObserver } from "centinel";
export default function NewTestInteractive() {
const questions = useObserver(newExam.questions);
const isAddingQuestion = useObserver(isAddingQuestionObs);
return (
{isAddingQuestion && (
<TempQuestion questionNumbr={questions.length + 1} />
)}
);
}You can update from another TS File or from any component
From a ts file with your logic:
import {
newExam,
} from "./new_exams";
export function addNewQuestion() {
const newQuestions = newExam.questions.getCopy()
newQuestions.push(emptyQuestion())
newExam.questions.set(newQuestions)
isAddingQuestionObs.set(false)
}
export function handleStartAddingNewAnswer() {
isAddingAnswerToQuestionObs.set(true)
}From a react component:
import {
newExam,
} from "./new_exams";
<Input
value={name}
onChange={(e) => newExam.name.set(e.target.value)}
required={true}
placeholder="Add Name"/>