React-chat-renderer


I wanted to build rich, interactive Slack and Discord workflows in a familiar idiom. Hence, a custom React renderer for declarative chat interactions.

Design Principles

- Support Slack's new Block-kit and Interactive Messaging Workflows.
- Attachments considered legacy/obsolete
- Each Component is a pure function with a parent-agnostic view of a Slack message entity (eg. a layout block). It's responsible for rendering its own JSON shape.
- these FCs should always return a JSON entity that is a subtree of a Slack message.
- Should be able to build USEFUL, self-contained components that can do asynchronous things. Don't need a full-blown hooks implementation, but you CAN make the JSX factory asynchronous.

Upcoming

- Microsoft Teams support
- more out-of-the-box elements

Inspirations

- React-pdf
- ink
- react-ionize
- react-synth
- react-slack
- jsx-slack

Example

$3

``jsx
/* @jsx slack.h /
/* @jsxFrag slack.Fragment /
import {
slack,
render,
ContextBlock,
ImageElement,
PlainText,
FC,
} from 'react-chat-renderer';

const DeltaIndicator: FC<{delta: number}, any> = async ({ delta }) => {
await fakePromise();

return delta > 0 ? (
altText="improved"
imageUrl="https://user-images.githubusercontent.com/97470/75739421-a7138180-5cb9-11ea-9547-e64acf86eb59.png"
/>
) : delta === 0 ? (
'okay!'
) : (
altText="declined"
imageUrl="https://user-images.githubusercontent.com/97470/75739424-a7ac1800-5cb9-11ea-969a-e1ac9f12a41a.png"
/>
);
};

it('renders contextblock with component children', async () => {
const message = (