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-native-global-store

v1.0.4

Published

React Native App Store state holder and persistor

Downloads

23

Readme

React Native Global Store

yarn PRsBadge npm npm

Add Global Store to your app in just One Step!

  • No Store configuration needed!
  • No Reducers or ACTIONS required.
  • Lightweight and Pure JS (TypeScript).
  • No MiddleWares needed, no more dispatch complications.
  • Very simple way to change store state, just like Component setState !
  • Simply connect your components with simpler connect wrapper
  • Easily use hooks for your functional component, useGlobalStore .
  • Inspired By redux, but distinguished from it by being faster and easier to learn and use.
Note that this lib was known before as React-Native-Redux.

Instalation

  • Install React Native Async Storage (required) if not installed.

  • Then install React Native Global Store

    npm i react-native-global-store

    - OR -

    yarn add react-native-global-store

No Linking or Pods are needed, you are ready to go!

Usage

GlobalStoreProvider

Props
initialState?:  object;
// Optional Initial State, defaults to {}

persistedKeys?:  string[];
// Optional keys to persist its values ( white list to persist )

loadingUI?:  JSX.Element;
// Optional Loading UI, defaults to : <View/>

storageKey?:  string;
// Optionally change Async Storage Key, default key is "GlobalStoreProvider"
import { GlobalStoreProvider } from "react-native-global-store"
Usage Example
import React from "react"
import { GlobalStoreProvider } from "react-native-global-store"
import AppContainer from "../navigation" // Path to Root Navigation

const myInitialState = { /* your initial state */ }

export default ()=> (
  <GlobalStoreProvider 
   initialState={myInitialState} 
   loadingUI={<MyLoadingUI />}
   persistedKeys=["user", "otherKey"] // Changes to these keys' values will be persisted.
  >
    <AppContainer />
  </GlobalStoreProvider>
)

useGlobalStore

import { useGlobalStore } from "react-native-global-store"
const [globalState, setGlobalState] = useGlobalStore()
Usage Example
import React from "react"
import { useGlobalStore } from "react-native-global-store"

const MyComponent = (props) => {

	const [globalState, setGlobalState] = useGlobalStore()
	// Then access and edit your globalState normally
	// Just like useState from React. 
	return (
		<>
			// Your Component goes here
		</>
	)
}

export default MyComponent

connect

Arguments
Componenet: ComponentClass
Usage
import React from "react"
import { connect } from "react-native-global-store"

class UserPage extend React.Component {

	// Your Component goes here
	
	// Access your store using this.props.yourKey
	// Update your store state using this.props.setGlobalState({})
}

// this will connect your global store to UserPage component props
export default connect(UserPage)