{"id":38835637,"url":"https://github.com/nsevendev/rxor","last_synced_at":"2026-01-17T13:55:48.365Z","repository":{"id":270746241,"uuid":"911333238","full_name":"nsevendev/rxor","owner":"nsevendev","description":"Package for use reactive variable in react","archived":false,"fork":false,"pushed_at":"2025-01-20T16:35:26.000Z","size":203,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-11T05:48:06.414Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nsevendev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-02T19:12:32.000Z","updated_at":"2025-02-04T10:04:55.000Z","dependencies_parsed_at":"2025-01-02T20:29:10.124Z","dependency_job_id":"80333e1d-bf87-4c5d-a42e-015ab551c66c","html_url":"https://github.com/nsevendev/rxor","commit_stats":null,"previous_names":["nsevendev/reactivizor","nsevendev/rxor"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nsevendev/rxor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nsevendev%2Frxor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nsevendev%2Frxor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nsevendev%2Frxor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nsevendev%2Frxor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nsevendev","download_url":"https://codeload.github.com/nsevendev/rxor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nsevendev%2Frxor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28509561,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T13:38:16.342Z","status":"ssl_error","status_checked_at":"2026-01-17T13:37:44.060Z","response_time":85,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-17T13:55:47.564Z","updated_at":"2026-01-17T13:55:48.357Z","avatar_url":"https://github.com/nsevendev.png","language":"TypeScript","readme":"# Rxor\n\n- Rxor is a lightweight and versatile library for managing reactive states with React.  \n  This documentation provides a complete guide to understanding and using rxor\n\n- Rxor uses `rxjs` as a subpackage, and needs `React lastest` minimum and `Typescript 5.0.0` minimum to work.\n\n_Installing `rxjs` in your project is **optional**.  \nThe `ReaXar` Class provides a pipe function that allows you to provide a series of `rxjs` `operators`,  \nin this case you will need to install `rxjs` to provide its `operators` to the method._\n\n---\n\n## Installation\n\n```bash\nnpm install rxor\n```\n\n---\n\n## Create a reactive instance  \n\n### `reaxar()`  \n\n- `todo` and `todo2` are a reactive instance, of type `class ReaXar` and has methods  \nthat you can use to interact with it.\n\n```ts\n// For use reaxar()\nimport { rea } from \"rxor\";\n\ntype TodoType = { id: number; title: string; done: boolean };\n\nconst todo = reaxar\u003cTodoType\u003e({ id: 0, title: \"Todo\", done: false });\nconst todo2 = reaxar\u003cTodoType | null\u003e(null);\n```\n\n### `useRea()` hook\n\n- But above all you can use it in a component using the `useRea` hook made available to you.\n\n- Here `useRea()` must take an argument of type `ReaXar`, and return its value.  \n  `useRea()` is a custom hook that will subscribe to the value of the reactive variable,  \n  and will update the component every time the value changes.  \n  in case of destruction of the component, the subscription is removed.\n\n- This means that if the value of `todo` is changed in another component,\n  it will automatically update in the `MyComponent` component.\n\n```tsx\n// For use useRea()\nimport { reaxar } from \"rxor\";\nimport { useRea } from \"rxor\";\n\ntype TodoType = { id: number; title: string; done: boolean };\nconst todo = reaxar\u003cTodoType\u003e({ id: 0, title: \"Todo\", done: false });\n\n// in component\nexport const MyComponent = () =\u003e {\n  const todo = useRea\u003cTodoType\u003e(todo);\n  \n  return (\n    \u003c\u003e\n      \u003cp\u003eid : {todo.id}\u003c/p\u003e\n      \u003cp\u003etitle : {todo.title}\u003c/p\u003e\n      \u003cp\u003edone : {todo.done}\u003c/p\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n### Type of `class ReaXar`  \n\n- `reaxar()` returns an instance of the `ReaXar` class (check list of methods)  \n- `useRea()` takes an argument of type `ReaXar` and returns its value. (check list of hooks)  \n\n**do not use `new ReaXar()` directly, use `reaxar()` instead  \nand use `useRea()` in your components for subscribe to the value of the reactive variable.  \nand use the methods of the `ReaXar` class to interact with the reactive variable.**\n\n```ts\n// It's the type of ReaXar class\nexport declare class ReaXar\u003cT\u003e {\n  private subject;\n  constructor(initialValue: T);\n  // value at the moment\n  get value(): T;\n  // the value setter\n  set value(newValue: T);\n  // subscribe to the value\n  subscribe: (callback: (value: T) =\u003e void) =\u003e Subscription;\n  // unsubscribe to the value\n  unsubscribe: (subscription: Subscription) =\u003e void;\n  // listen for the value change and apply rxjs operators\n  pipe: \u003cR\u003e(...operators: OperatorFunction\u003cT, R\u003e[]) =\u003e Observable\u003cR\u003e;\n  // listen for the value change and allow to return a modification without modifying the original value\n  computed: \u003cR\u003e(callback: (value: T, index: number) =\u003e R) =\u003e Observable\u003cR\u003e;\n}\n```\n\nNow use an instance of the `ReaXar` class in your store, service or other  \nand use `useRea` to access the reactive variable of your store in any component,  \nchange the value of your `ReaXar`, all your components will be updated directly  \n\n---  \n\n## Store and service management  \n\n- rxor has a store and service system, which will allow you to properly separate  \nyour business part from the rest of your application.\n\n- This system follows a simple logic which is:  \n  - First:  \n  one store has one/many service,  \n  the store has the data and the service interacts with this data  \n\n  - Second:  \n  the store contains the data and therefore it is accessible in reading in the components  \n  using custom hooks and fully reactive. The service has a service store accessible  \n  throughout the application to facilitate access. modification of the data.  \n\n- The store must be injected into the service and each service created and which extends `ReaService`  \nwill be injected into a \"service store\" accessible in all services  \n(which will allow for example a task service to have access to the category service very easily)  \n\n### `ReaXor`  \n\n- `ReaXor` is composed of a ReaXar type \"store\" property and accessibility methods in addition to the ReaXar methods  \n\n- For create a store, use a static function of ReaXor,  \nwith first argument the initial value of the store  \nand the second argument the name of the store.  \n\n**the name of the store is required, it will be used to access the store  \nin the component with the hook `useRxStore` (check a list of the hook)**  \n\n1. Create a type of the store\n2. Create a store with a static function of ReaXor `ReaXor.create()`  \n   internally ReaXor registers the store in a \"store register\" and creates an instance of ReaXar  \n   which it stores in a \"store\" property of your instance.  \n3. Use the store in a component with the hook `useRxStore`  \n   it returns the value of your store and this value will be fully reactive,  \n   if changes are made elsewhere in the application the value of the store in your component  \n   will be updated automatically\n\n```tsx\nimport { ReaXor, useRxStore } from \"rxor\";\n\n// 1. create a type for store\ntype TodoType = {id: number, title: string, done: boolean};\n\n// 2. create a store\nconst todoStore = ReaXor.create\u003cTodoType[]\u003e([], \"todoStore\");\n\n// 3. use in a component\nexport const ListTodo = () =\u003e {\n  const todos = useRxStore\u003cTodoType[]\u003e(\"todoStore\");\n  \n  return (\n          \u003c\u003e\n            \u003cdiv\u003e\n              \u003cdiv\u003e\n                {todos!.length \u003e 0 \n                    ? todos!.map((todo: TodoType) =\u003e \u003cp\u003e{todo.title}\u003c/p\u003e) \n                    : \u003cp\u003eNot todo\u003c/p\u003e\n                }\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/\u003e\n  )\n}\n```\n\n### Type of `ReaXor`  \n\n```ts\nexport declare class ReaXor\u003cT\u003e {\n    private readonly store;\n    private readonly initialValue;\n    private constructor();\n    // create a instance of ReaXor\n    static create\u003cT\u003e(initialValue: T, keyStore: string): ReaXor\u003cT\u003e;\n    // get the ReaXar instance of property store in ReaXor, access to the ReaXar methods\n    get reaxar(): ReaXar\u003cT\u003e;\n    // value at the moment\n    get value(): T;\n    // the value setter\n    set value(newValue: T);\n    // reset your value with inital value\n    reset(): void;\n    // subscribe to the value\n    subscribe(callback: (value: T) =\u003e void): void;\n}\n```\n\n---  \n\n## `ReaService`  \n\n`ReaService` is an abstract class that will extend your service classes,  \nand add your services in a \"service registry\", accessible in all your services.  \n\n- Easy to use you have to give it the interface of your service  \nand the name of your service to the super function of your class  \n\n### Create your service\n\n```ts\nimport { ReaService } from \"rxor\";\n\n// use type or interface\nexport type TodoServiceType = {\n  todoStore: () =\u003e ReaXor\u003cTodoType[]\u003e,\n  createTodo: (title: string) =\u003e TodoType,\n  addTodo: (todo: TodoType) =\u003e void,\n  removeTodo: (id: number) =\u003e void,\n  toggleTodo: (id: number) =\u003e void,\n  deleteTodoChecked: () =\u003e void,\n}\n\n// typed ReaService with TodoServiceType\nexport class TodoService extends ReaService\u003cTodoServiceType\u003e {\n  private todoStore: ReaXor\u003cTodoType[]\u003e;\n\n  constructor(todoStore: ReaXor\u003cTodoType[]\u003e) {\n      // call a super function and give the name for service\n    super(\"todoService\");\n    this.todoStore = todoStore\n  }\n\n  todoStore = (): ReaXor\u003cTodoType[]\u003e =\u003e {\n    return this.todoStore\n  }\n  \n  // function util for just create object of todo, is just for example\n  createTodo = (title: string): TodoType =\u003e {\n    return {\n      id: this.generateUniqueId(), // just for example\n      title,\n      done: false\n    } as TodoType\n  }\n  \n  addTodo = (todo: TodoType): void =\u003e {\n    this.todoStore.value = [...this.todos.value, todo]\n  }\n\n  removeTodo = (id: number): void =\u003e {\n    this.todoStore.value = this.todoStore.value.filter((todo: TodoType) =\u003e todo.id !== id)\n  }\n\n  toggleTodo = (id: number): void =\u003e {\n    this.todoStore.value = this.todoStore.value.map((todo: TodoType) =\u003e todo.id === id ? {...todo, done: !todo.done} : todo)\n  }\n\n  deleteTodoChecked = (): void =\u003e {\n    this.todoStore.value = this.todoStore.value.filter((todo: TodoType) =\u003e !todo.done)\n  }\n}\n```\n\n### Instance of your class\n\n- Create your instance of your service class and inject the store in the constructor  \n- Now you can use your service with a register of service `rxservice()` (check list of methods)  \n\n**you have nothing else to do**\n\n```ts\nimport {todoStore} from './todoStore'\n\nnew TodoService(todoStore);\n```  \n\n### Call a service in another service  \n\n- call another service in a class, ReaService provides you  \nwith a `rxService` instance of RxService (a register of service) with a method `getService`  \nthat allows you to access all the services you will need.  \n\n```ts\nclass AnotherService extends ReaService\u003cAnotherServiceType\u003e {\n  private anotherStore: ReaXor\u003cAnotherType[]\u003e;\n\n  constructor(anotherStore: AnotherStore) {\n    super(\"anotherService\");\n    this.anotherStore = anotherStore;\n  }\n\n  // use the todoService\n  addTodo = (todo): ReaXor\u003cTodoType[]\u003e =\u003e {\n    this.rxService.getService(\"todoService\").addTodo(todo);\n  }\n  \n  // ... all methods for store Another\n}\n```\n\n### Call service in component  \n\n- You can use the `rxservice()` (check list methods) function to access your service in a component.  \n\n```tsx\nexport const CheckAllTodo = () =\u003e {\n  const handlerChange = (e: ChangeEvent\u003cHTMLInputElement\u003e) =\u003e {\n    rxservice\u003cTodoServiceType\u003e(\"todoService\").checked(e.currentTarget.checked)\n  }\n\n  return (// ... your jsx)\n}\n```\n\n---  \n\n## List of class  \n\n#### `ReaXor` // create a store for your reactive properties  \n#### `ReaService` // extends your service with him  \n\n---  \n\n## List of methods  \n\n#### `reaxar()` // create a reactive instance de type ReaXar\n#### `rxservice()` // it's a register of services\n\n### Type  \n```ts\nexport declare function reaxar\u003cT\u003e(initialValue: T): ReaXar\u003cT\u003e;\nexport declare const rxservice: \u003cT\u003e(key: string) =\u003e T;\n```\n\n---  \n\n## List of hooks  \n\n#### `useRea()` // subscribe to the value of a ReaXar instance\n#### `useReaCompute()` // subscribe to the value of a ReaXar instance and apply rxjs operators\n#### `useRxCompute()` // subscribe to the value of a ReaXar instance and allow to return a modification without modifying the original value  \nprefer this method to the method `useReaCompute` if you want to return a modification without modifying the original value\n```ts\nconst isCheckedAll = useRxCompute\u003cTodoServiceType, boolean\u003e(\n    \"todoService\", \n    (service) =\u003e service.isAllTodoChecked() // call a fonction of service\n)\n```\n#### `useRxFetch()` // subscribe to the value of a ReaXar instance and fetch data from an api  \n#### `useRxStore()` // subscribe to the value of a ReaXar instance in a store\n\n### Type  \n```ts\nexport declare function useRea\u003cT\u003e(variable: ReaXar\u003cT\u003e): T;\nexport declare function useReaCompute\u003cT\u003e(observable: Observable\u003cT\u003e): T | undefined;\nexport declare const useRxCompute: \u003cT, R\u003e(serviceKey: string, method: (service: T) =\u003e Observable\u003cR\u003e) =\u003e R | undefined;\nexport declare const useRxFetch: \u003cT, R = Error\u003e(serviceKey: string, method: (service: T) =\u003e Promise\u003cvoid\u003e, errorCustom?: (error: any) =\u003e R) =\u003e {\n  loading: boolean;\n  error: Error | null;\n};\nexport declare const useRxStore: \u003cT\u003e(key: string) =\u003e T | undefined;\n```  \n\u003cbr\u003e\n\u003cbr\u003e\n","funding_links":[],"categories":["Angular-Inspired Solutions"],"sub_categories":["Wrappers"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnsevendev%2Frxor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnsevendev%2Frxor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnsevendev%2Frxor/lists"}