import EventEmitter from "reactjs-eventemitter";

or

const EventEmitter = require("reactjs-eventemitter")

// child class or sibling class

​

import React from 'react'

import EventEmitter from "reactjs-eventemitter";

​

export default function child() {

​

​

    return (

        <div>

            This is child componetn 

​

            <button onClick={(event) => EventEmitter.dispatch('buttonClick', event)}>

                Press Me

            </button>

        </div>

    )

​

}

import React, { useEffect } from 'react'

const EventEmitter = require("reactjs-eventemitter")

​

​

​

​

export default function Parent() {

​

    useEffect(() => {

        console.log("parent component loading...")

​

​

        EventEmitter.subscribe('buttonClick', event => {

​

            console.log(event)

        })

        EventEmitter.subscribe('buttonClick2', event => {

            console.log(event)

        })

        EventEmitter.subscribe('buttonClick3', event => {

            console.log(event)

        })

​

    })

​

    return (

        <div>

            This is parent componetn 

        </div>

    )

​

}

// parent class or sibling class

​

import React from 'react'

import EventEmitter from "reactjs-eventemitter";

​

export default function parent() {

​

    EventEmitter.subscribe('buttonClick', event => {

​

        console.log("button pressed inside child");

        console.log(event)

​

    })

​

    return (

        <div>

            This is parent component 

        </div>

    )

​

}

// your app class

​

import React from 'react';

​

import Parent from "./parent";

import Child from "./child";

​

// here both parent and child are independent of each other

​

function App() {

  return (

    <div className="App">

        <Parent /> // parent or sibling component

        <Child /> // child or sibling component

    </div>

  );

}

​

export default App;

npm i reactjs-eventemitter