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

status-ref

v0.2.0

Published

A boolean status controller, can track and trigger status changes

Downloads

254

Readme

status-ref

A boolean status controller

npm install status-ref

A boolean status controller, can track and trigger status changes.

The status refresh logic is like the method of vue reactivity system.

Usage

Create a status ref instance.

First is use static method StatusRef.create, and it's recommended to use.

import { StatusRef } from 'status-ref';

// Pass a function which return `track` and `trigger` methods to `create`,
// and it will return a status ref target.
const useStatusRef = StatusRef.create(() => {
	return {
		track(target: object, key: string) {
			// Where be called when access status.
			// If here return a not void value, it will be used to the status return;
		},
		trigger(target: object, key: string, status: boolean) {
			// Where be called when status changed.
		},
	};
});

// Create a status target.
const status = useStatusRef('loading');

Second is use new to create an instance directly.

const useStatusRef = new StatusRef(() => {
	return {
		track(target: object, key: string) {},
		trigger(target: object, key: string, status: boolean) {},
	};
});

// It need use `use` method to create a status target.
const status = useStatusRef.use('loading');

Properties

// The default status value is `false`,
// unless you use the `initial` to change the default value,
// and only the status read property like `loading` is enumerable.
status.loading;

// Operate all of the status.
status.on();
status.off();
status.toggle();

// It also has the following methods for every status.
status.onLoading();
status.offLoading();
status.toggleLoading();

// If the status is matched when register the callback,
// you can pass `true` to the second parameter to immediately call the callback.
status.listenOnLoading(() => {});
status.listenOffLoading(() => {});

Set initial value

// You can use `initial` method to set all status initial value.
const status = useStatusRef.initial(true).use('loading', 'success');
status.loading; // true
status.success; // true

// Or you can pass in an array with status name and initial value.
const status = useStatusRef('loading', ['error', false], ['success', true]);
status.loading; // false
status.error; // false
status.success; // true

// For type inference, you should make array be constant,
// or use `StatusRef.T` to create an array.
const status = useStatusRef(
	'loading',
	['success', true] as const,
	StatusRef.T('allow', true),
);
status.loading; // false
status.success; // true
status.allow; // true

For vue

<script setup>
	import { useVueStatusRef } from 'status-ref/vue';

	// The usage is same as `useStatusRef`.
	const status = useVueStatusRef('loading');
</script>

<template>
	<div @click="status.toggleLoading()">{ status.loading }</div>
</template>

For react

import { useReactStatusRef } from 'status-ref/react';

// It must out of the component,
// otherwise it will be recreated every time the component is rendered.
const status = useReactStatusRef('loading');

export default function App() {
	return <div onclick={status.toggleLoading()}>{status.loading}</div>;
}