Skip to content

Instantly share code, notes, and snippets.

@tomonsoejang

tomonsoejang/PubSub.js

Forked from pablen/PubSub.js
Created November 27, 2019 06:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tomonsoejang/b623dda2fe3dc5048960299da6d4fe5a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tomonsoejang/b623dda2fe3dc5048960299da6d4fe5a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Pablo Enrici created this gist Jan 13, 2018.
    64 changes: 64 additions & 0 deletions PubSub.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    import React, { Component } from 'react';
    import PubSub from 'pubsub-js';

    class App extends Component {
    state = { show: true };
    render() {
    return (
    <div className="App">
    <button onClick={() => this.setState(state => ({ show: !state.show }))}>
    {this.state.show ? 'Hide panel' : 'Show panel'}
    </button>
    <Toggler />
    {this.state.show && <Panel initialColor="blue" />}
    </div>
    );
    }
    }

    class Toggler extends Component {
    render() {
    return (
    <div>
    <button type="button" onClick={() => PubSub.publish('TOGGLE')}>
    Toggle red/blue
    </button>
    <button type="button" onClick={() => PubSub.publish('SET PINK')}>
    Set pink
    </button>
    <button type="button" onClick={() => PubSub.publish('SET YELLOW')}>
    Set yellow
    </button>
    </div>
    );
    }
    }

    class Panel extends Component {
    state = {
    color: this.props.initialColor
    };

    subscriptions = [
    PubSub.subscribe('SET YELLOW', () => this.setState({ color: 'yellow' })),
    PubSub.subscribe('SET PINK', () => this.setState({ color: 'pink' })),
    PubSub.subscribe('TOGGLE', () => {
    console.log(`Toggling from ${this.state.color}.`);
    this.setState(({ color }) => ({
    color: color === 'red' ? this.props.initialColor : 'red'
    }));
    })
    ];

    componentWillUnmount = () => this.subscriptions.forEach(PubSub.unsubscribe);

    render() {
    return (
    <div
    style={{ width: 100, height: 100, backgroundColor: this.state.color }}
    />
    );
    }
    }

    export default App;