🕹📞📟 react-twiml

Render Twilio Markup Language instructions from React.

Useful for SMS and Voice automation via Twilio webhooks.

👉 You can play with the Giphy game example by sending an SMS to [phone]

Ideas

With Twilio, you can automate voice calls and SMS answers via webhooks and TwiML.

Also, Twilio can leverage HTTP sessions to save the "application" state.

Experiment : use React to modelize the "UI" (Voice and SMS interactions) and use HTTP sessions to keep the state and rehydrate components when needed (webhooks are stateless).

This allows to create simple to more complex scenarios using your favorite paradigm.

Usage

import { render, Response, Play, Say } from 'react-twiml'
 
const SimpleVoice = ({ code }) => (
  <Response>
    <Play loop="3">https://api.twilio.com/cowbell.mp3</Play>
    <Say voice="woman" language="en">Your top secret code is : { props.code }</Say>
  </Response>
)
 
app.post('/webhook', (req, res) => render(SimpleVoice, {
  code: 42
})

See also ./examples

The Giphy game example shows how to handle a multi-step scenario

Async

When rendering on the server, we cant rely on setState because we need a single, full render of the final state.

Thus, we need to delay the component render (see the Giphy game example).