discord-jsx-renderer

A custom React Renderer for use with Discord.js

You can use all sorts of react features including state, context, effects and more.

Examples

Code:

export const Counter = () => {
    const [count, setCount] = useState(0);

    return (
        <message v2 ephemeral>
            <container>
                <text>
                    Counter: **{count}**
                </text>
                <row>
                    <button
                        style="danger"
                        onClick={() => setCount(c => c - 1)}
                    >
                        -1
                    </button>
                    <button
                        style="success"
                        onClick={() => setCount(c => c + 1)}
                    >
                        +1
                    </button>
                </row>
            </container>
        </message>
    )
};

More examples:

• TicTacToe (2 players)
• With react-router

Installation

Simply install discord-jsx-renderer and react with your package manager of choice:

npm add discord-jsx-renderer react

The package exports the singleton djsx for managing component instances.

For discord-jsx-renderer to be able to handle event handlers, dont forget to call djsx.dispatchInteraction with any interaction events:

client.on(Events.InteractionCreate, (interaction) => {
    djsx.dispatchInteraction(interaction);
});

Documentation

You can view the documentation on djsx.deniz.blue. It also includes a Getting Started guide.

Contributing

Feel free to contribute to this project