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 +33644640807
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.
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 : { 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
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).