React-texts NPM

React Texts

React components for RCS Business Messaging.

Installation

npm install react-texts

Then import the css files:

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

Usage

CardCarousel

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 founders@trypinnacle.com.