New Prague, Minnesota

    @composi/observer

    1.1.6 • Public • Published

    @composi/observer

    A class to watch and send custom events.

    Install

    npm i -D @composi/observer

    After installing, you can import it into your project to use:

    import { Observer } from '@composi/observer'

    Create an Observer

    Because Observer is a class, you must instantiate a new instance to use it:

    import { Observer } from '@composi/observer'
    
    const observer = new Observer()

    Create a Watcher

    To use an observer you need to tell it to watch for an event. You do this by passing it the event and a callback to the observer's watch method. By default the callback with get passed a parameter holding any data that was passed when the event is sent.

    import { Observer } from '@composi/observer'
    
    const observer = new Observer()
    observer.watch('some-event', data => {
      console.log(`Received this data: ${data}`)
    })

    Event with Multiple Watchers

    You can create multiple watchers for the same event, but with different callbacks. In that case, when the event is send, all the callbacks will fire. You might do this when you want multiple components to respond to the same event.

    import { Observer } from '@composi/observer'
    
    const observer = new Observer()
    // First watcher for 'some-event':
    observer.watch('some-event', data => {
      console.log(`First watcher received this data: ${data}`)
    })
    
    // Second watcher for 'some-event':
    observer.watch('some-event', data => {
      console.log(`Second watcher received this data: ${data}`)
    })

    Ignore Event Data

    You do not have to use data passed in a event. In fact, you can set up a watcher that just reacts to the event:

    import { Observer } from '@composi/observer'
    
    const observer = new Observer()
    observer.watch('some-event', () => {
      console.log(`The event did fire!`)
    })

    Note: events are custom, so you can namespace them if you need to.

    Send an Event

    After setting up a watcher for an event, you need to send the event to make the watcher react. You do this with the observer's watch method. This takes two arguments: the event to send and any optional data you want to send with the event.

    import { Observer } from '@composi/observer'
    
    const observer = new Observer()
    observer.watch('some-event', data => {
      console.log(`Received this data: ${data}`)
    })
    
    // Sometime later:
    observer.send('some-event', 'We are firing "some-event" now!')
    // Console will log:
    // Received this data: We are firing "some-event" now!

    Send Event without Data

    As we mentioned earlier, you do not have to pass data with a sent event. Here we take the example of a watcher without data and send to it:

    import { Observer } from '@composi/observer'
    
    const observer = new Observer()
    observer.watch('some-event' () => {
      console.log(`The event did fire!`)
    })
    
    // Sometime later send event without data:
    observer.send('some-event')
    // Console will log:
    // The event did fire!

    Unwatch an Event

    After registering an observer and watching an event, you may at some point want to turn it off. You do this by using the observer's unwatch method. This takes one argument: the event to unwatch.

    In this example we set up an observer and later unwatch the event:

    import { Observer } from '@composi/observer'
    
    const observer = new Observer()
    observer.watch('some-event', data => {
      console.log(`Received this data: ${data}`)
    })
    
    // Sometime later:
    observer.send('some-event', 'We are firing "some-event" now!')
    // Console will log:
    // Received this data: We are firing "some-event" now!
    
    // Sometime later we unwatch the event:
    observer.unwatch('some-event')
    // Now sending to that even will do nothing:
    observer.send('some-event', 'Sending to unwatched event.')

    Note: if you have multiple watchers for an event and you unwatch it, this disables all watchers for that event.

    Install

    npm i @composi/observer

    DownloadsWeekly Downloads

    5

    Version

    1.1.6

    License

    MIT

    Unpacked Size

    11.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • wobba