PhoenixProvider 🛠📦

Provide phoenix socket and channel by React Context.

---

Now is written by typescript

Can be check

API

import {
    Provider,
    Consumer,
    useSocket,
    useChannel,
    usePresence,
} from 'phoenix-provider';

React.rencer(
    <Provider url={'/socket'} options={{ params: {token: 'my-app-token' }}}>
        <App>
    </Provider>
)

const App = () => {
    const socket = useSocket();

    return (
        <div>
            <div>
                {socket.isConnected() ? 'connected' : 'disconnected'}
            </div>
            <div>
                <Channel />
            </div>
        </div>
    );
};

const Channel = () => {
    const [list, setList] = useState([]);
    const channel = useChannel('lobby', { user: 'Josh' });

    const presence = usePresence('lobby');

    useEffect(() => {
        presence.onSync(() => {
            setList(presence.list());
        });
    }, [presence]);

    return (
        <ul>
            {list?.map((l) => (
                <li>{l}</li>
            ))}
        </ul>
    );
}