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'/>Credits
License
Unlicense. Please see License File for more information.