React Texts

React components for RCS Business Messaging.

Maintained by Pinnacle RCS.

Installation

npm install react-texts

Then import the css files:

import "react-texts/styles.css";
import "react-texts/fonts.css";

Usage

import { CardCarousel } from "react-texts";

<CardCarousel
  showDevtools={true}
  cards={[
    {
      title: "Select Size",
      subtitle: "Choose your preferred size",
      quickReplies: [
        { reply: "Add to Cart", payload: "ADD_TO_CART" },
        { reply: "Share", payload: "SHARE" },
        { reply: "Favorite", payload: "FAVORITE" },
      ],
      options: [
        { value: "s", label: "Small" },
        { value: "m", label: "Medium" },
        { value: "l", label: "Large" },
      ],
    },
    {
      title: "Select Size",
      subtitle: "Choose your preferred size",
      options: [
        { value: "s", label: "Small" },
        { value: "m", label: "Medium" },
        { value: "l", label: "Large" },
      ],
    },
    {
      title: "Select Size",
      subtitle: "Choose your preferred size",
      mediaUrl:
        "https://encrypted-tbn1.gstatic.com/shopping?q=tbn:ANd9GcQf7lYCclFaQwj7IPE6Qg5tVeJYHIWb7YdHsiqAlj4N7nmb5teePbdXEbDSvKsaUhdmPU7oDfzRh0LDlrZEIeAVrVqvA-s2HjS4EWtvDzrNASv6qViSzdOd1g",
      options: [
        { value: "s", label: "Small" },
        { value: "m", label: "Medium" },
        { value: "l", label: "Large" },
      ],
    },
    {
      title: "Select Color",
      subtitle: "Choose your preferred color",
      options: [
        { value: "black", label: "Black" },
        { value: "white", label: "White" },
        { value: "red", label: "Red" },
      ],
    },
  ]}
/>;

See the Storybook for more usage examples.

Actually sending RCS business messages

We may be a bit biased, but we think Pinnacle RCS is the easiest way to get started sending RCS business messages. If you have any questions, feel free to reach out to me on X or email us at [email protected].

Contributing

Feel free to open an issue or submit a PR--contributions are welcome!