https://github.com/pupper/pupper-react

React components for Pupper
https://github.com/pupper/pupper-react

php pupper react websockets

Last synced: 3 months ago
JSON representation

React components for Pupper

• Host: GitHub
• URL: https://github.com/pupper/pupper-react
• Owner: pupper
• License: unlicense
• Archived: true
• Created: 2017-10-17T15:23:13.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2020-07-29T06:11:27.000Z (over 4 years ago)
• Last Synced: 2024-07-18T16:33:13.689Z (4 months ago)
• Topics: php, pupper, react, websockets
• Language: JavaScript
• Homepage: https://pupper.github.io/pupper-react
• Size: 1.88 MB
• Stars: 13
• Watchers: 1
• Forks: 3
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
![d005d89e-ff25-4450-9119-aa56ff0d8949](https://user-images.githubusercontent.com/3274103/31629229-4859fe88-b2b3-11e7-85fb-66c35710f607.png)

[![Codacy Badge](https://api.codacy.com/project/badge/Grade/50309dd39f0f4c4cb160f779050b710a)](https://www.codacy.com/app/bouiboui/pupper-react?utm_source=github.com&utm_medium=referral&utm_content=pupper/pupper-react&utm_campaign=badger)

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](https://github.com/bouiboui/pupper/tree/master/app)

## 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.

```jsx

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

    

    {/* becomes  */}

    

       

    {/* becomes  */}

    

    

```

### withSocket

`withSocket` ables a component to be provided by `SocketProvider`.

```jsx

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.

```jsx

class CustomerLogger extends EventListener {

    onData(value) {

        console.log('Customer has logged', value);

    }

}

// Usage

```

### 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.

```jsx

class LoginButton extends EventDispatcher {

    render() {

        return Submit

    }

}

// Usage

```

## Credits

- [bouiboui][link-author]

- [All Contributors][link-contributors]

## License

Unlicense. Please see [License File](LICENSE.md) for more information.

[ico-license]: https://img.shields.io/badge/license-Unlicense-brightgreen.svg?style=flat-square

[link-author]: https://github.com/bouiboui

[link-contributors]: ../../contributors