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

@segment/sovran-react-native

v1.1.3

Published

A cross-platform state management system

Downloads

333,388

Maintainers

apackerapackergaprabhugaprabhupoojapatilsegpoojapatilsegandwivediandwivedivikakumarvikakumaryshkpryshkprpriyanshispriyanshisjbasiglio-segmentjbasiglio-segmentpraguptapraguptasbhodiwalsbhodiwalsahilsharma0709sahilsharma0709farhan0581farhan0581jkusa_segmentjkusa_segmentharksinghharksingharjunbhandagearjunbhandagey.yuy.yuslenin-twilioslenin-twilioskondamuriskondamurinithan-twilionithan-twiliopraveenugiripraveenugiribnakkinabnakkinahema-bahirwani-segmenthema-bahirwani-segmentsandhya16sandhya16nemery-segmentnemery-segmentighorelaighorelamansarimansaribhavanki-segmentbhavanki-segmentar7devar7devvaibhavnandavaibhavnandanikumarsegmentnikumarsegmentitsarijitrayitsarijitrayssunejassunejaazhaotwilioazhaotwilioldelossantosldelossantoscjo2cjo2achandrashekaranachandrashekaranaparna.singhalaparna.singhalynguyenynguyentimmyzsearcytimmyzsearcyigracheva-twilioigracheva-twilioyashnit-segmentyashnit-segmentnanotimmnanotimmsrivig21srivig21chenchensegmentcomchenchensegmentcomsanket.mishrasanket.mishralweimersegmentlweimersegmentrcheedhallarcheedhallajxin_twiliojxin_twilioodoren_segmentodoren_segmentaditi.raveeshaditi.raveeshdltnbrks-segmentdltnbrks-segmentsai-patanjalisai-patanjalihimanshuphhimanshuphalecjacobs-segmentalecjacobs-segmentsshaikh_segmentsshaikh_segmentjohn.lee1100john.lee1100dazu70dazu70brian.aguirrebrian.aguirrepooja.patilpooja.patilsegment_fansegment_fannlubchenconlubchencojsh-wujsh-wunithin-bennynithin-bennypoojasegmentpoojasegmentebru.odokebru.odokbannapplebannapplerodhilton_twiliorodhilton_twilioguthriesegmentguthriesegmentsrishti-nemasrishti-nemacdelaomartinezcdelaomartinezmiguelpdiaz8miguelpdiaz8sundareswar.jayakumarsundareswar.jayakumargbatragbatraspencerattickspencerattickakodankiryakodankirynanette.ranesnanette.ranesgsolis_segmentgsolis_segmentnitinpm432nitinpm432amigandhiamigandhisegmentseansegmentseanhmohanram_seghmohanram_segjrupasinghejrupasinghedevthaledevthalesmccoy-twiliosmccoy-twilioseg-leonelsanchesseg-leonelsanchesjibrangjibrangsethgrid_segmentsethgrid_segmentlight-bringer-blrlight-bringer-blraubreysineaubreysineed-twilion-npmed-twilion-npmharsh-joshi99harsh-joshi99irfan.ali.segmentirfan.ali.segmentkbhargavaram-sgkbhargavaram-sgneedcaffeineneedcaffeinenat-gridnat-gridwlumsegmentwlumsegmentmoyara2moyara2bala.singareddybala.singareddyakash.gautam07akash.gautam07preetyppreetypviveksainaneesegmentviveksainaneesegmentmsarafmsarafkjoerreskjoerresrokatyalrokatyalainatancincoainatancincoanton-vylushchakanton-vylushchaksowjanyasegmentsowjanyasegmentalayvoraalayvoratw-dgarciatw-dgarciaparag.pandaparag.pandablangtwilioblangtwilioryanrouleau-segmentryanrouleau-segmenttwjosiahtwjosiahmcullenmeyermcullenmeyerdavid.anusontarangkul.segmentdavid.anusontarangkul.segmentmckern_segmentmckern_segmentsegment-adminsegment-adminnainy.agrawalnainy.agrawaltdibaccotdibaccosudojatinsudojatinnageshgolemnageshgolembrandonheyer-segmentbrandonheyer-segmentalfrimpongalfrimpongdobrin.ganevdobrin.ganevankit.gupta.unthinkableankit.gupta.unthinkablemarinheromarinherobenattwiliobenattwiliobharath.boregowdabharath.boregowdaconniechenconniechensungju.jinsungju.jinpooyajpooyajyli119yli119ea_segmentea_segmentemilyjiaemilyjiakx-segmentkx-segmentxinghao.huangxinghao.huangharsh.vardhanharsh.vardhanjoe.ayoub.segmentjoe.ayoub.segmentgkochar123gkochar123rollcoderollcodeariel.silvestriariel.silvestricherylj-segmentcherylj-segmentimmanojimmanojaaronklishaaronklishmichelrmichelrmaneesh.dharma29maneesh.dharma29brianhumphreystwiliobrianhumphreystwiliojfehrman.segmentjfehrman.segmentjoetessyjoetessypmuninpmuninjalexy12jalexy12jbandi-twiliojbandi-twilioprayansh-twilioprayansh-twiliodominicbarnesdominicbarnesbrandon.scott-segmentbrandon.scott-segmentbgillanbgillanphillip.thomasphillip.thomasricardo.rossiricardo.rossiforgetfulfellowforgetfulfellowfauzy.yyfauzy.yymayur-pitalemayur-pitaledbaik-twilio-segmentdbaik-twilio-segmentseg-rustybaileyseg-rustybaileytanya.gupta.segmenttanya.gupta.segmentpmiller-twiliopmiller-twilionevermore2022nevermore2022aishikawakiaishikawakicsayusocsayusomcoulibalimcoulibalishupadhyayshupadhyayjahood-twiliojahood-twiliosaisagarkappaganthulasaisagarkappaganthularmukundanrmukundanarubiochavezarubiochavezshuvrajit9904shuvrajit9904s3gm3nts3gm3ntama0223ama0223tbrennanjtbrennanjdangmai-segmentdangmai-segmentshraddha-twilioshraddha-twiliosa-jsootersa-jsooterenyi.asonyeenyi.asonyeafsha-nazim-segafsha-nazim-segmschaszbergermschaszbergerlnambalnambavaradarajan-twvaradarajan-twseanhan-segmentseanhan-segmentreplateroreplaterosayan-das-insayan-das-injusteenjusteenjgabe13jgabe13meg1000meg1000funlufunluashwitha.bgashwitha.bgwhaider_twiliowhaider_twiliotcgilberttcgilbertkevinburkesegmentkevinburkesegmentfelttripfelttripprabhnoor1997prabhnoor1997akashyap91akashyap91clintz.segclintz.segkarimkeshwanikarimkeshwaniwally.tgwally.tgrhall-twiliorhall-twilioyash-twilioyash-twiliobrookstaylorjrbrookstaylorjrshayan-golafshanishayan-golafshanilerahulramlerahulrammugelstadmugelstadrrivera-segmentrrivera-segmentsethnutetwiliosethnutetwiliomanali-bhosalemanali-bhosalechtoombschtoombssethsegmentsethsegmenteric-hydeeric-hydeelmoselyeeelmoselyeemichaelghsegmichaelghsegjayakrishnannairjayakrishnannairlateefatlateefatmaryam.sharifmaryam.sharifwdbettswdbettsryanligonryanligonsindhusegmentsindhusegmentlfdelossantoslfdelossantosvbatanovvbatanovlluque-twiliolluque-twiliojair.avilesjair.avilespmaidpmaidsong4yousong4youpeterdemartinipeterdemartiniemmy.byrneemmy.byrnevincen7tranvincen7trandean-huynhdean-huynhcdignam-segmentcdignam-segmentabhinavsurekaabhinavsurekaarunlalam-segmentarunlalam-segmentneeharikakondipatineeharikakondipatisimpixelatedsimpixelatedchihchun-twiliochihchun-twilioacharles14acharles14jyim008jyim008fhalim-segmentfhalim-segmentcfreecfreehjoonpmhjoonpmceline-segmentceline-segmentpmcanseco-segmentpmcanseco-segmentmasiramasiraamillet89amillet89cholt002cholt002av-segmentav-segmentaghotikaraghotikarvikrant-segmentvikrant-segmentlarryatsegmentlarryatsegmentscruwys1scruwys1kyliepedersenkyliepedersenjinaparkjinaparksegmentiosegmentiorajulvaderarajulvaderalpediredlalpediredlan2parkon2parkotyson_segmenttyson_segmentbgamwellbgamwellsalolivaressalolivareserikdwerikdwchenxiangzhangchenxiangzhangmericssonmericssonprayansh-segmenttprayansh-segmenttjeremylarkinjeremylarkinbsneedbsneeddanieljackinsdanieljackinssegment-sethsegment-sethjames9446james9446priscilla.giattipriscilla.giattinlsunnlsundrew-thompsondrew-thompsonsegment-jsinghsegment-jsinghandrius-segmentandrius-segmentvalerieernstvalerieernstgilomergilomermarcelopvmarcelopveric.rognereric.rognerkdharaiyakdharaiyajon.anderson-at-segment.comjon.anderson-at-segment.comstacy.songstacy.songrexatsegmentrexatsegmentnickaguilarnickaguilarbradenbeckerbradenbeckerreneewangreneewangdan.laskydan.laskysam.tapiasam.tapiavikramkumar19vikramkumar19mpriyad25mpriyad25jeremy.parkerjeremy.parkersmidgessmidges

Readme

@segment/sovran-react-native

A cross-platform lightweight local state management system designed for React Native.

Motivation

Redux is a great global state management tool for React, but it's not a good fit when you need to have local state management at different scope levels.

The main advantages of Sovran vs Redux are:

  • Sovran is lightweight and simple to use. Subscribing and dispatching actions is easy to setup.
  • Sovran can manage state at different scope levels. From global to local to a single object.
  • Sovran is designed to be used with React Native so it supports dispatching actions via the bridge native -> RN

Installation

npm install @segment/sovran-react-native

Usage

To use in JS/TS you just need to use createStore to create a sovran object.

import { createStore } from '@segment/sovran-react-native';

interface State {
  count: number;
}

// Create the sovran store with our type and initial state
const store = createStore<State>({
  count: 0,
});

createStore accepts any object as a state. You only need to pass the initial state as a parameter. Returns a Store object:

Store object

The returned store object has the following methods:

subscribe(callback):

Subscribes a listener to updates on the store:

const unsubscribe = store.subscribe((newState: State) => {
  // do something with the new state
  console.log(newState);
});

// When you want to get rid of the listener
unsubscribe();

dispatch(action):

Dispatches an action to modify the state, actions can be async:

Remember to keep actions as pure functions.

store.dispatch((state: State): State => {
  return {
    ...state,
    count: state.count + 1,
  }
});

getState():

Returns the current state on the store:

const currentState: State = store.getState();

Native -> RN Updates

Sovran supports dispatching actions from native to RN. Very useful for brownfield apps.

To use this feature you first need to register which stores will listen to native updates and which actions can be sent from native:

import { createStore, registerBridgeStore } from '@segment/sovran-react-native';

interface MessageQueue {
  messages: string[];
}

// Create the sovran store with our type and initial state
const messages = createStore<MessageQueue>({
  messages: [],
});

// Action to add new events
const addMessage = (message: Message) => (state: MessageQueue) =>
  { messages: [...state.messages, message] };

// Register the store to listen to native events
registerBridgeStore({
  // Sets which store object is listenning
  store: messages,
  // Defines which action types can be sent from native and how to handle them
  actions: {
    'add-message': addMessage,
  },
});

Now you are ready to send updates from native code!

iOS

(Supports both Objective-C and Swift)


@import React;
@import sovran_react_native;

// ...

[Sovran dispatchWithAction:@"add-message" payload:@{ @"origin": @"Native", @"message": @"Hello from Objective-C!" }];

Android

(Supports both Java and Kotlin)

import com.sovranreactnative.Sovran;

public class MainApplication extends Application implements ReactApplication {

  private Sovran sovran = new Sovran();

  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {

  // Due to how Android registers modules for RN make sure you instantiate the Sovran Module package first and use the same one when you register it in you MainApplication
  @Override
  protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // Register the same sovran object
    packages.add(sovran);
    return packages;
  }


  // ...

  Map<String, String> payload = new HashMap<>();
  payload.put("origin", "Native");
  payload.put("message", "Hello from Java/Kotlin!");
  sovran.dispatch("add-message", payload);

//...

Check out the Example project for a more in depth use case in an RN project!

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT