npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@geoctrl/simple-state

v1.0.8

Published

Simple state management that scales with your application. No dependencies. Less than 1kb gzipped.

Downloads

202

Readme

Simple State

Simple state management that scales with your application. No dependencies. Less than 1kb gzipped.

Install

# NPM
$ npm install -S @geoctrl/simple-state
# yarn
$ yarn add @geoctrl/simple-state

Setting up your state

Simple Example

To use simple-state, just instantiate the SimpleState class:

import SimpleState from '@geoctrl/simple-state';
  
const myState = new SimpleState();
console.log(myState.get()); // {}

Each instantiated state is a separate instance of the simple-state class, and contains all the methods needed to use the state.

Default State

You can add a default state by passing in an object as the first argument:

import SimpleState from '@geoctrl/simple-state';

const myState = new SimpleState({
  firstName: 'John',
  lastName: 'Doe',
  age: 5,
});

console.log(myState.get().name); // 'John'

You can also reset to your default state with the reset() method. Continue reading for details.

Extend your state

If you need to add complicated logic or ajax calls when you change state, we can extend the SimpleState class with any sort of methods that we want:

import SimpleState from '@geoctrl/simple-state';

class MyState extends SimpleState {
  isAdult() {
    return this.state.age >= 18;
  }
  hasLastName() {
    return !!this.state.lastName;
  }
}

const myState = new MyState({ age: 5 });
console.log(myState.isAdult()); // false

Using your state

Using the example above, we can now use our myState in our app.

.set(state)

To set data on your state, you need to use the .set() method. This can be done within your extending class, or your instantiated instance:

inside your extending class:

import SimpleState from '@geoctrl/simple-state';

class MyState extends SimpleState {
  updateName(name) {
    const fullName = name.split(' ');
    this.set({
      firstName: fullName[0],
      lastName: fullName[1],
    });
  }
}

const myState = new MyState();
myState.updateName('John Doe');

from the instantiated instance:

import myState from './my-state';

myState.set({
  firstName: 'John',
  lastName: 'Doe',
});

.get(key)

Get the entire state object with no arguments (.get()), or pass in a key to get one property (.get(key)):

import SimpleState from '@geoctrl/simple-state';

const myState = new SimpleState({ age: 29 });
myState.get(); // { age: 29 }
myState.get('age'); // 29

.clear()

Completely clear state (empty object). This method will emit changes to all subscribers.

import myState from './my-state';

const state = myState.get({ age: 29 });
state.clear();
state.get(); // {}

.reset()

Reset state back to defaultState (passed in during instantiation). This method will emit changes to all subscribers.

import SimpleState from '@geoctrl/simple-state';

const myState = new SimpleState({ age: 29 });
myState.set({ age: 32, show: true });
myState.reset();
myState.get(); // { age: 29 }

.subscribe(next, props, error)

Subscribe allows us to get incremental changes over time. Much like how observables work, we subscribe to the state and pass in a callback to be called on every change:

// from the instantiated instance:
import myState from './my-state';

myState.subscribe((state) => console.log(state));

If your state is big, there's a good chance that not every observer will want all changes. To make sure we're being smart with our updates, we can pass in key names into the props argument to tell our state what props to watch for and let us know if any changes have occurred:

import myState from './my-state';

myState.subscribe((state) => console.log(state), ['firstName', 'lastName']);
// only changes to 'firstName' and 'lastName' will fire an event here

The last argument error is a callback in case an error is thrown within the class.

import myState from './my-state';

myState.subscribe((state) => console.log(state), [], (err) => {
  // handle error
  console.error(err);
});

State set hooks

.onSetBefore(state) => state

Manipulate state before set is called. Requires state to be returned.

class MyState extends SimpleState {
  onSetBefore(state) {
    return {
      ...state,
      lastUpdated: new Date(),
    }
  }
}
const myState = new MyState();
myState.set({ age: 29 });
state.get(); // { age: 29, lastUpdated: 1571291829316 }

.onSetAfter(newState, delta)

Do side-effect things after set is called.

Args

  • newState - new state
  • delta - new state passed in to .set(). This helps us perform specific operations based on the delta properties.
class MyState extends SimpleState {
  onSetAfter(state) {
    updateStorage('myState', state).then(() => {});
  }
}

Warning: calling this.set() within a hook will result in an infinite loop and will crash your app 😨. Don't do that.

Practical React Example

my-state.js

import SimpleState from '@geoctrl/simple-state';

class MyState extends SimpleState {
  isAdult() {
    return this.state.age >= 18;
  }
}

export default new MyState();

app.js

import React, { useState, useEffect } from 'react';
import myState from './my-state';

export function DisplayAge() {
  const [age, updateAge] = useState(myState.state.age);
  const [isAdult, updateIsAdult] = useState(myState.isAdult());
  
  useEffect(() => {
    const ageObserver = myState.subscribe(({ age }) => {
      updateAge(age);
      updateIsAdult(myState.isAdult());
    }, ['age'], (err) => {
      console.error(err);
    });
    return ageObserver.unsubscribe;
  }, []);  
  
  return (
    <div>
      <div>Age: {age}</div>
      <div>Is adult: {isAdult.toString()}</div>
    </div>
  );
}