simple-core-state
v0.0.20
Published
A simple core state manager for react
Downloads
160
Readme
Simple Core State 0.0.19
This Library is still work in progress
Inspiration
The inspiration came from using using pulseJS, but since that its not maintained anymore and i wanted to create a simple core state library that is easy to use and expand, i have created Simple Core State which the name already says simple.
Installation
yarn add simple-core-state
Setting up the core
import { SimpleCore } from 'simple-core-state';
// We can supply the the lib with an interface so we can control how the data can be handled
interface ICoreType {
account: { email: string; id: string } | null;
currentTheme: 'light' | 'dark';
lastUpdate: number | null;
app: {
running: boolean;
run_time: number;
};
}
const defaultCore = {
account: null,
currentTheme: 'light',
lastUpdate: 1,
app: {
running: false,
run_time: 453543543,
},
};
// Initialize the core
export const instance = new SimpleCore<ICoreType>(defaultCore, {
// Storage configurations
storage: {
// You can se a custom prefix for the storage, the default is ['_simple' + _keyname]
prefix: 'customPrefix',
// Support other storage library's for such cases as for React Native
custom: {
async get(key) {
return await AnotherStorageLib.get(key);
},
async set(key, value) {
return await AnotherStorageLib.set(key, value);
},
},
},
});
// Persist values by an array with keys
instance.perist(['currentTheme', 'lastUpdate']);
// Export the core for easy access to hooks and updates and etc
export const core = instance.core();
// Receive the event
core._events.custom_event.on((data) => {});
// Set a value
core.currentTheme.set('dark');
// Reset the value to its original state as its default core
core.currentTheme.reset();
// Update a key from an object
core.account.patch({ id: '37a7ce20-7250-4a40-b683-3cb0a848c2b9' });
// Update a key of the object from its value itself
core.app.updatePiece('running', true);
Using the hook
import * as React from 'react';
import { useSimple } from 'simple-core-state';
import { core } from './somefile';
export const App = () => {
const theme = useSimple(core.currentTheme);
return (
<div>
// Display the value
<p>{theme}</p>
// Update the value
<button onClick={() => core.currentTheme.set('light')}>Update</button>
</div>
);
};
Events (🚧 under development)
- Create your event name
const instance = new Simple(...);
instance.events.create(['someName', 'multiple_events']);
- Create the listener
import React from 'react';
import { myCore } from './core.ts';
import { useSimpleEvent } from 'simple-core-state';
export const App = () => {
useSimpleEvent(core._events.test, (e) => {
// You're logic here
});
return <div></div>;
};
- Sending Data
// Supports sending multiple arguments
core._events.test.send('some value');