forked from callstack/react-native-paper
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtext-input.html
78 lines (76 loc) · 22.3 KB
/
text-input.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<html lang="en" data-reactroot=""><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/><meta name="mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="description" content="A component to allow users to input text."/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="TextInput"/><meta name="twitter:description" content="A component to allow users to input text."/><meta property="og:type" content="website"/><meta property="og:title" content="TextInput"/><meta property="og:description" content="A component to allow users to input text."/><title>TextInput</title><link type="text/css" rel="stylesheet" href="app.css"/></head><body><div id='root'><div class="_wrapper__1nbmuhq" data-reactroot=""><aside class="_sidebar__1gt5k1p"><input type="checkbox" class="_menuButton__1gt5k1p" id="slide-sidebar" role="button"/><label class="_menuIcon__1gt5k1p" for="slide-sidebar">☰</label><div class="_menu__1gt5k1p"><input type="search" value="" placeholder="Filter…" class="_searchbar__1gt5k1p"/><nav class="_navigation__1gt5k1p"><a class="_link__1gt5k1p" href="index.html">Home</a><a class="_link__1gt5k1p" href="showcase.html">Showcase</a><a class="_link__1gt5k1p" href="getting-started.html">Getting Started</a><a class="_link__1gt5k1p" href="theming.html">Theming</a><a class="_link__1gt5k1p" href="icons.html">Icons</a><a class="_link__1gt5k1p" href="contributing.html">Contributing</a><hr class="_separator__1gt5k1p"/><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="appbar.html">Appbar</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="appbar-action.html">Appbar.Action</a><a class="_link__1gt5k1p" href="appbar-back-action.html">Appbar.BackAction</a><a class="_link__1gt5k1p" href="appbar-content.html">Appbar.Content</a><a class="_link__1gt5k1p" href="appbar-header.html">Appbar.Header</a></div></div><a class="_link__1gt5k1p" href="banner.html">Banner</a><a class="_link__1gt5k1p" href="bottom-navigation.html">BottomNavigation</a><a class="_link__1gt5k1p" href="button.html">Button</a><a class="_link__1gt5k1p" href="caption.html">Caption</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="card.html">Card</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="card-actions.html">Card.Actions</a><a class="_link__1gt5k1p" href="card-content.html">Card.Content</a><a class="_link__1gt5k1p" href="card-cover.html">Card.Cover</a></div></div><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="checkbox.html">Checkbox</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="checkbox-android.html">Checkbox.Android</a><a class="_link__1gt5k1p" href="checkbox-ios.html">Checkbox.IOS</a></div></div><a class="_link__1gt5k1p" href="chip.html">Chip</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="data-table.html">DataTable</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="data-table-cell.html">DataTable.Cell</a><a class="_link__1gt5k1p" href="data-table-header.html">DataTable.Header</a><a class="_link__1gt5k1p" href="data-table-pagination.html">DataTable.Pagination</a><a class="_link__1gt5k1p" href="data-table-row.html">DataTable.Row</a><a class="_link__1gt5k1p" href="data-table-title.html">DataTable.Title</a></div></div><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="dialog.html">Dialog</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="dialog-actions.html">Dialog.Actions</a><a class="_link__1gt5k1p" href="dialog-content.html">Dialog.Content</a><a class="_link__1gt5k1p" href="dialog-scroll-area.html">Dialog.ScrollArea</a><a class="_link__1gt5k1p" href="dialog-title.html">Dialog.Title</a></div></div><a class="_link__1gt5k1p" href="divider.html">Divider</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="">Drawer</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="drawer-item.html">Drawer.Item</a><a class="_link__1gt5k1p" href="drawer-section.html">Drawer.Section</a></div></div><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="fab.html">FAB</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="fab-group.html">FAB.Group</a></div></div><a class="_link__1gt5k1p" href="headline.html">Headline</a><a class="_link__1gt5k1p" href="helper-text.html">HelperText</a><a class="_link__1gt5k1p" href="icon-button.html">IconButton</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="">List</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="list-accordion.html">List.Accordion</a><a class="_link__1gt5k1p" href="list-icon.html">List.Icon</a><a class="_link__1gt5k1p" href="list-item.html">List.Item</a><a class="_link__1gt5k1p" href="list-section.html">List.Section</a></div></div><a class="_link__1gt5k1p" href="modal.html">Modal</a><a class="_link__1gt5k1p" href="paragraph.html">Paragraph</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="portal.html">Portal</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="portal-host.html">Portal.Host</a></div></div><a class="_link__1gt5k1p" href="progress-bar.html">ProgressBar</a><div><div class="_row__1gt5k1p"><a class="_link__1gt5k1p" href="radio-button.html">RadioButton</a><button class="_buttonIcon__1gt5k1p _expandedIcon__1gt5k1p" style="opacity:0"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div class="_sectionItems__1gt5k1p _sectionItemsVisible__1gt5k1p"><a class="_link__1gt5k1p" href="radio-button-android.html">RadioButton.Android</a><a class="_link__1gt5k1p" href="radio-button-group.html">RadioButton.Group</a><a class="_link__1gt5k1p" href="radio-button-ios.html">RadioButton.IOS</a></div></div><a class="_link__1gt5k1p" href="searchbar.html">Searchbar</a><a class="_link__1gt5k1p" href="snackbar.html">Snackbar</a><a class="_link__1gt5k1p" href="subheading.html">Subheading</a><a class="_link__1gt5k1p" href="surface.html">Surface</a><a class="_link__1gt5k1p" href="switch.html">Switch</a><a class="_link__1gt5k1p" href="text.html">Text</a><a class="_link__1gt5k1p _active__1gt5k1p" href="text-input.html">TextInput</a><a class="_link__1gt5k1p" href="title.html">Title</a><a class="_link__1gt5k1p" href="toggle-button.html">ToggleButton</a><a class="_link__1gt5k1p" href="touchable-ripple.html">TouchableRipple</a></nav></div></aside><div class="_container__z02bld"><main class="_content__z02bld"><div class="_container__vv20rl"><h1 class="_title__vv20rl">TextInput</h1><div class="_markdown__vv20rl _markdown__1e8xr4b"><p>A component to allow users to input text.</p>
<div class="screenshots">
<figure>
<img class="medium" src="screenshots/textinput-flat.focused.png" />
<figcaption>Flat (focused)</figcaption>
</figure>
<figure>
<img class="medium" src="screenshots/textinput-flat.disabled.png" />
<figcaption>Flat (disabled)</figcaption>
</figure>
<figure>
<img class="medium" src="screenshots/textinput-outlined.focused.png" />
<figcaption>Outlined (focused)</figcaption>
</figure>
<figure>
<img class="medium" src="screenshots/textinput-outlined.disabled.png" />
<figcaption>Outlined (disabled)</figcaption>
</figure>
</div>
<h2>Usage</h2>
<pre><code class="language-js"><span class="token keyword keyword-import" >import</span> <span class="token operator" >*</span> <span class="token keyword keyword-as" >as</span> React <span class="token keyword keyword-from" >from</span> <span class="token string" >'react'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> TextInput <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'react-native-paper'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token keyword keyword-class" >class</span> <span class="token class-name" >MyComponent</span> <span class="token keyword keyword-extends" >extends</span> <span class="token class-name" >React<span class="token punctuation" >.</span>Component</span> <span class="token punctuation brackets-braces" >{</span>
state <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
text<span class="token punctuation" >:</span> <span class="token string" >''</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token function" >render</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>TextInput</span>
<span class="token attr-name" >label</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >'</span>Email<span class="token punctuation" >'</span></span>
<span class="token attr-name" >value</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>text<span class="token punctuation brackets-braces" >}</span></span>
<span class="token attr-name" >onChangeText</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>text <span class="token operator" >=</span><span class="token operator" >></span> <span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> text <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span></span>
<span class="token punctuation" >/></span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
</div><h2 class="_propsHeader__vv20rl">Props</h2><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="mode" href="#mode"><code>mode</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>'flat' | 'outlined'</code></div><div class="_propItem__vv20rl"><span>Default value: </span><code>'flat'</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Mode of the TextInput.</p>
<ul>
<li><code>flat</code> - flat input with an underline.</li>
<li><code>outlined</code> - input with an outline.</li>
</ul>
<p>In <code>outlined</code> mode, the background color of the label is derived from <code>colors.background</code> in theme or the <code>backgroundColor</code> style.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="disabled" href="#disabled"><code>disabled</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>boolean</code></div><div class="_propItem__vv20rl"><span>Default value: </span><code>false</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>If true, user won't be able to interact with the component.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="label" href="#label"><code>label</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>string</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>The text to use for the floating label.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="placeholder" href="#placeholder"><code>placeholder</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>string</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Placeholder for the input.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="error" href="#error"><code>error</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>boolean</code></div><div class="_propItem__vv20rl"><span>Default value: </span><code>false</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Whether to style the TextInput with error style.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="onChangeText" href="#onChangeText"><code>onChangeText</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>Function</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="underlineColor" href="#underlineColor"><code>underlineColor</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>string</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Underline color of the input.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="multiline" href="#multiline"><code>multiline</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>boolean</code></div><div class="_propItem__vv20rl"><span>Default value: </span><code>false</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Whether the input can have multiple lines.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="numberOfLines" href="#numberOfLines"><code>numberOfLines</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>number</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>The number of lines to show in the input (Android only).</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="onFocus" href="#onFocus"><code>onFocus</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>() => mixed</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Callback that is called when the text input is focused.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="onBlur" href="#onBlur"><code>onBlur</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>() => mixed</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Callback that is called when the text input is blurred.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="render" href="#render"><code>render</code> (required)</a><div class="_propItem__vv20rl"><span>Type: </span><code>(props: RenderProps) => React.Node</code></div><div class="_propItem__vv20rl"><span>Default value: </span><code>props => <NativeTextInput {...props} /></code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Callback to render a custom input component such as <code>react-native-text-input-mask</code>
instead of the default <code>TextInput</code> component from <code>react-native</code>.</p>
<p>Example:</p>
<pre><code class="language-js"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>TextInput</span>
<span class="token attr-name" >label</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Phone</span> <span class="token attr-name" >number"</span>
<span class="token attr-name" >render</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>props <span class="token operator" >=</span><span class="token operator" >></span>
<span class="token operator" ><</span>TextInputMask
<span class="token punctuation brackets-braces" >{</span><span class="token punctuation" >.</span><span class="token punctuation" >.</span><span class="token punctuation" >.</span>props<span class="token punctuation brackets-braces" >}</span></span>
<span class="token attr-name" >mask</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>+[00]</span> <span class="token attr-name" >[000]</span> <span class="token attr-name" >[000]</span> <span class="token attr-name" >[000]"</span>
<span class="token punctuation" >/></span></span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token operator" >/</span><span class="token operator" >></span>
</code></pre>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="value" href="#value"><code>value</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>string</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Value of the text input.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="style" href="#style"><code>style</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>any</code></div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="theme" href="#theme"><code>theme</code></a><div class="_propItem__vv20rl"><span>Type: </span><code>Theme</code></div><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"></div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="editable" href="#editable"><code>editable</code></a><div class="_propItem__vv20rl"><span>Default value: </span><code>true</code></div></div><a class="_propLabel__vv20rl _rest__vv20rl" href="https://facebook.github.io/react-native/docs/textinput.html#props"><code>...<!-- -->TextInput props</code></a><h2 class="_propsHeader__vv20rl">Methods</h2><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="isFocused" href="#isFocused"><code>isFocused</code></a><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Returns <code>true</code> if the input is currently focused, <code>false</code> otherwise.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="clear" href="#clear"><code>clear</code></a><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Removes all text from the TextInput.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="focus" href="#focus"><code>focus</code></a><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Focuses the input.</p>
</div></div><div class="_propInfo__vv20rl"><a class="_propLabel__vv20rl" name="blur" href="#blur"><code>blur</code></a><div class="_propItem__vv20rl _markdown__vv20rl _markdown__1e8xr4b"><p>Removes focus from the input.</p>
</div></div></div></main></div></div></div>
<script>
window.__INITIAL_PATH__ = 'text-input';
</script>
<script src="app.bundle.js"></script><script src="scripts/snack.js"></script></body></html>