Snippet

Snippets are pieces of reusable code - used as building blocks that can be copied and added to projects to assist engineers and customers with development.

Code

Usage

import { Snippet } from "@twilio-labs/match/components";
const Component = () => (
<Snippet langauge="javascript">{`console.log("Ahoy, world!");`}</Snippet>
);

Snippet Props

PropTypeDefaultDescription
variant?SnippetVariant'dark''dark', 'light'
languageSnippetLanguagenull'go', 'javascript', 'csharp', 'php', 'ruby', 'python', 'java', 'json', 'c', 'bash', 'shell-session', 'groovy'
label?stringnullFilename or snippet name.
githubLink?stringnullLink to full GitHub or Gist source code.
showLineNumbers?booleantrueInclude line numbers in code block.
wrapLines?booleanfalseWraps long lines of code.
maxLines?numbernullConstrains the height of code block to a set number of lines.

SnippetGroup Props

PropTypeDefaultDescription
variant?SnippetVariant'dark''dark', 'light'
label?stringnullFile name or snippet name.
compact?booleanfalseForce mobile optimized layout for all breakpoints.

Guidelines

About Snippets

The Snippet component improves readability of embedded code samples with syntax highlighting and automatic line numbering. All provided languages support both a light and dark theme.

Multiple Snippets may be combined with the SnippetGroup component. A common use case for SnippetGroups is providing a code sample in multiple languages.

Accessibility

Both Snippet and SnippetGroup are fully keyboard accessible. Here are some tips to ensure a positive user experience for all users:

  • Provide a descriptive label such as the current filename or step in a process to clarify the purpose of the Snippet.
  • Enable long line wrapping whenever possible for a better reading experience.

Examples

Single Line

Single line Snippets exclude the label bar and line numbers. It is automatically detected but will default to the multi line layout if line wrapping is enabled.

$ curl -G https://api.twilio.com/2010-04-01/Accounts -u '[YOUR ACCOUNT SID]:[YOUR AUTH TOKEN]'

Multi Line

A multi line snippet displays a label and line numbers by default. If no label is provided the snippet language will be used as a fallback.

PHP
1<?php
2require __DIR__ . '/vendor/autoload.php';
3use TwilioRestClient;
4
5// Your Account SID and Auth Token from twilio.com/console
6$account_sid = 'ACXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
7$auth_token = 'your_auth_token';
8// In production, these should be environment variables. E.g.:
9// $auth_token = $_ENV["TWILIO_AUTH_TOKEN"]
10
11// A Twilio number you own with SMS capabilities
12$twilio_number = "+15017122661";
13
14$client = new Client($account_sid, $auth_token);
15$client->messages->create(
16    // Where to send a text message (your cell phone?)
17    '+15558675310',
18    array(
19        'from' => $twilio_number,
20        'body' => 'I sent this message in under 10 minutes!'
21    )
22);

Grouped

Snippets can be grouped to provide multiple languages for a code example. The label supplied to each Snippet will be used as the tab name for navigation. If no label is provided the language will be used as a fallback.

Sending SMS using the Programmable SMS API

Compact

When placing snippet groups in a tight space, the compact property may be used to force a mobile optimized layout for all breakpoints.

Outbound Call