@pupper/pupper-react NPM

d005d89e-ff25-4450-9119-aa56ff0d8949

Pupper stands for "PHP Plus React" (PPR > Pupper). The goal is to make a Framework that takes the best of both technologies and makes them communicate bi-directionnaly.

See pupper on Github for more information

API

SocketProvider

SocketProvider takes a WebSocket as a prop and hydrates it to its child components.

It can automatically bind them by using the bindTo prop, that can be overwritten.

const globalSocket = new WebSocket('ws://127.0.0.1/ws');

<SocketProvider socket={globalSocket} bindTo='customEvent'>
    
    {/* becomes <CustomComponent socket={globalSocket} bindTo='customEvent'/> */}
    <CustomComponent/>
       
    {/* becomes <OtherComponent socket={globalSocket} bindTo='otherEvent'/> */}
    <CustomComponent bindTo='otherEvent' />
    
</SocketProvider>

withSocket

withSocket ables a component to be provided by SocketProvider.

export default withSocket(MyComponent)

EventListener

EventListener is the Component you want to extend whenever you want to receive updates for an event.

Overwrite its onData method to define what to do with the value.

class CustomerLogger extends EventListener {
    onData(value) {
        console.log('Customer has logged', value);
    }
}

// Usage
<CustomerLogger bindTo='customerHasLogged'/>

EventDispatcher

EventDispatcher is the Component you want to extend whenever you want to send event updates.

Invoke its onSubmit method to send a new event with its toSubmit prop value.

class LoginButton extends EventDispatcher {
    render() {
        return <button onClick={this.onSubmit}>Submit</button>
    }
}

// Usage
<LoginButton toSubmit={this.state.customerId} bindTo='customerHasLogged'/>