Centinel

State manager for react using observer pattern and a custom hook.

NPM

https://www.npmjs.com/package/centinel

Features

• Less than 1Kb minified
• Simple
• Fast Dev Experience
• Dev full controll

Installation

Install centinel with npm, bun...

 npm install centinel

Usage/Examples

First define your variables inside a ts file

Define your state in any way you want

You can use composable objects

import{Observable}from"centinel";exportconstnewExam={name: newObservable<string>(""),description: newObservable<string>(""),selectedSubjectName: newObservable<string>(""),selectedTeacherIDS: newObservable<string[]>([]),questions: newObservable<Question[]>([]),};

Or with just simple variables Or Both Or ANYTHING YOU WANT

import{Observable}from"centinel";exportsubjects=newObservable<Subject[]>([])exportisQuestionDirty=newObservable<boolean>(false)

Use the custom hook to grab the state

import{useObserver}from"centinel";exportdefaultfunctionNewTestInteractive(){constquestions=useObserver(newExam.questions);constisAddingQuestion=useObserver(isAddingQuestionObs);return({isAddingQuestion&&(<TempQuestionquestionNumbr={questions.length+1}/>)});}

Update the state calling the set method

You can update from another TS File or from any component

From a ts file with your logic:

import{newExam}from"./new_exams";exportfunctionaddNewQuestion(){constnewQuestions=newExam.questions.getCopy();newQuestions.push(emptyQuestion());newExam.questions.set(newQuestions);isAddingQuestionObs.set(false);}exportfunctionhandleStartAddingNewAnswer(){isAddingAnswerToQuestionObs.set(true);}

From a react component:

import{newExam,}from"./new_exams";<Inputvalue={name}onChange={(e)=>newExam.name.set(e.target.value)}required={true}placeholder="Add Name"/>

Authors

• @CharlieBytes