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

react-global-light

v0.4.8

Published

Lightweight, Highly-Customizable global state container made with React Hook and the context system

Downloads

10

Readme

testing

NPM JavaScript Style Guide

Install

npm install --save testing

Usage

import React, { Component } from 'react'

import MyComponent from 'testing'

class Example extends Component {
  render () {
    return (
      <MyComponent />
    )
  }
}

License

MIT © shafferchance

Global Light

The goal here is provide someone with a lightweight solution that will work out of the box all while bringing a high level of customizability to the table.

Goals of the library

  • Be lightweight and customizable
  • Have minimal/negible performance cost
  • Ensure that integration is easy
  • Function with or without customization
  • Be Backwards Compatible, unless absolutely necessary to not be

Rationale

Are you tired of having to update your code frequently becasue React Router released a new version? Tired of getting way more functionality than required with Redux? Just curious, or something else? Welcome, the idea behind this very small collection of hooks and components is to give developers more choice for routing and state management past the well known solutions of Redux and React Router, while allowing developers to control the bloat within their application as well as not have to worry about updating their code quite as frequently, so that developers may work on what they want and not spend all day maintaining an old application. Thus this library will remain backwards compatibile for most versions and be split into modules to maintain small size if necessary. While they are many other solutions avaliable they tend to be good at one thing and try and conquoer one problem rather than solve multiple.

Current Tasks

  • [x] Bring over current code base
  • [ ] ~~Make so single tag controls everything rather than dedicated file~~ Simplify props
  • [x] Document code thoroughly (ish for now)
  • [x] ~~Integrate into a routing library at some point~~ Routing is in ish...
  • [ ] Integrate IndexedDB for serialization
  • [ ] Investigate creating a collection of Contexts for mutation and access from one key

Future Tasks

  • [ ] Create a way to pass to higher context on page, if possible
  • [ ] Integrate component testing for a more proper check and examples
  • [ ] Possbily move all routing into hooks (Have to see if this viable)

Global store

The reducer function built-in has a LIFO set with CRUD built-in that functions off of the value key in the action object sent inside of the reducer function:

  • action object:
    • {type: [Actions], [key]: [Value]}
    • The above key is how the data will be stored
  • setValue -or- SET:
    • Will check if they value has been deleted by looking for a graveyard attribute on the data
  • deleteValue -or- DELETE:
    • Will add a graveyard attribute to the data and archieve the last known data-value
  • recoverValue -or- RECOVER:
    • Will remove the graveyard attribute and place the last value as the current value

Please review the sequence diagram below to see how this functions

If you wish to create a global store/context you can use the store object from the library, please use the following example:

    import { Store } from 'react-global-light';

    const App = ({ children }) => {
        const initialState = {
            // Properties
        };
        // Reducer is optional and built into them
        // Logic
        return (
            <Store stateI={ initialState }>
                { children }
            </Store>
        );
    }

Creating context

If you wish to create a context container for any component within the file import and use as follows:

    import { CustContextContainer } from 'react-global-light';
    const App = () => {
        const reducer = (state, action) => {
            switch (action.type) {
                case action[String]:
                    // Logic
                    return {
                        ...state,
                        [key]: action.key
                    }
                // ...actions
                default:
                    return state;
            }
        };

        const initialState = {
            ...
        };

        // Logic
        return (
            // Other outputs
            <CustContextContainer reducer={ reducer } initialState={ initialState }>
                // Children components
            </CustContextContainer>
        );
    }

This an example of how exactly to utilize the Context Container created. Depending on the context desired use the following:

  • global, Global inside of useCustomContext([context])
  • routing, router, Router inside of useCustomContext([context])
  • preset, Preset inside of useCustomContext([context])
  • () will default to the Custom Context provider that access the next parent CustContextContainer

Note: Eventually the above will not be necessary

    import { useCustContext } from 'react-light-global';

    const App = () => {
        // Use this form and follow rules of hooks
        const [{ [Property] }, use[Property]] = useCustomContext();

        // Render function
    }
Router Sequence Diagram

To utilize the Router

The router only needs routes passed to it. The rest will be handled automatically by the component. There will eventually be Route objects to go into the Routing component. Although, the navbar component will always be up to the user and accessible through the useCustomContext() hook within a child element of the Routing component.

To create links for routing system use the Link component. This triggers the context system's reducer function. The props are as follows:

  • url: Url linked to new element within SPA
  • name: Text to display as name of link
  • linkClass: CSS class for button

For the routing component that is pre-built into this package please use as follows:

    import { Routing } from 'react-global-light';

    const routes = [
        ...{
            id: [Number],
            path: [String],
            name: [String],
            component: [React.Component]
        }
    ];

    const App = ({ initialState }) => {
        return (
            <Routing initialState={ initialState } routes={ routes }>
                ...<Link url={ [String ]} name={ [String] } linkClass={[String] }/>
                // Children
            </Routing>
        );
    }
Food for thought

Could Mutation Observers make this better and able to have little user intervention? How large of a chunk can a Mutation Observer reside over before performance starts taking a hit?

Contact Information

If you wish to help please feel free to reach out with the following: