p2q v1.0.0

p2q

Lightweight, cross-component, cross-context data and state sharing for React, Solid, etc.

• Share data between components on the webapp, across tabs and windows
• Maintain shared state and listen for live updates
• Components can query other components for answers

Installation

npm i p2q

Usage

React

In App.jsx

import p2q from 'p2q'

const store = p2q.createStore({
  hello: ''
})

In ComponentA.jsx

import p2q from 'p2q'

const ComponentA = (props) => {
  const ID = 'Component-A'
  const A = p2q.register(ID)
  const storeSnapshot = p2q.getStore()

  useEffect(() => {
    // Reacts to broadcasts and direct messages to this component
    A.listen((from, data) => {
      console.log(from, data)
    })

    // Sets store across all components
    p2q.setStore({ ...storeSnapshot, hello: 'there' })

    // Sets store across all contexts (webapp, tabs, windows)
    p2q.setStore({ ...storeSnapshot, hello: 'world!' }, { global: true })

    A.setupResponseHandler((respondingTo: ID) => {
      if (ID === 'Component-A') A.tell(respondingTo, true)
      else A.tell(respondingTo, false)
    })

    return () => {
      A.unsubscribe()
    }
  })
}

In ComponentB.jsx

import p2q from 'p2q'

const ComponentB = (props) => {
  const B = p2q.register('Component-B')
  const [ store, setStore ] = useState(p2q.getStore())

  useEffect(() => {
    // Reacts to changes in store
    B.listenToStore(setStore)

    B.tell('Component-A', 'This message will be sent to Component A')
    B.broadcast('This message will be broadcasted to all registered components')
    B.broadcast('This message will be broadcasted to all registered components across all contexts (webapp, tabs, windows)', { global: true })
    
    // Start listening for responses to the question we will ask..
    B.listen((from, data) => {
      if (data === true) console.log('Component A exists!')
    })
    // Ask all components if they are Component A
    B.ask()

    return () => {
      B.unsubscribe()
    }
  })
}

Why

Notes

I do not recommend the usage of this package for big applications, because Redux works best for state-management at that point. But if you're building a small application and don't really care enough, or Redux seems like overkill but you really need X-Component data sharing and state management, then you can give this a try. Indian developers can refer to this handy infographic.

License

MIT