-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathcompositor.json
147 lines (147 loc) · 10.8 KB
/
compositor.json
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
{
"name": "mukeshsoni/react-telephone-input",
"version": "0.1.4",
"libraries": {
"xv": "^1.1.25"
},
"title": "",
"branch": "master",
"style": {
"name": "Default",
"componentSet": {
"nav": "nav/BasicNav",
"header": "header/BannerHeader",
"article": "article/BasicArticle",
"footer": "footer/BasicFooter"
},
"fontFamily": "-apple-system, BlinkMacSystemFont, sans-serif",
"fontWeight": 400,
"bold": 600,
"lineHeight": 1.5,
"typeScale": [
72,
48,
24,
20,
16,
14,
12
],
"monospace": "Menlo, monospace",
"heading": {
"fontFamily": null,
"fontStyle": null,
"fontWeight": 600,
"lineHeight": 1.25,
"textTransform": null,
"letterSpacing": null
},
"h0": {},
"h1": {},
"h2": {},
"h3": {},
"h4": {},
"h5": {},
"h6": {},
"alternativeText": {},
"space": [
0,
8,
16,
32,
48,
64,
96
],
"layout": {
"maxWidth": 1024,
"centered": false
},
"colors": {
"text": "#111",
"background": "#fff",
"primary": "#08e",
"secondary": "#059",
"highlight": "#e08",
"border": "#ddd",
"muted": "#eee"
},
"border": {
"width": 1,
"radius": 2
},
"link": {},
"button": {
"hover": {
"boxShadow": "inset 0 0 0 999px rgba(0, 0, 0, .125)"
}
},
"input": {},
"body": {
"margin": 0
},
"breakpoints": {
"xs": "@media screen and (max-width:40em)",
"sm": "@media screen and (min-width:40em)",
"md": "@media screen and (min-width:52em)",
"lg": "@media screen and (min-width:64em)"
}
},
"content": [
{
"component": "nav",
"links": [
{
"href": "http://unstack.in/react-telephone-input/",
"text": "Home"
},
{
"href": "https://github.com/mukeshsoni/react-telephone-input",
"text": "GitHub"
},
{
"href": "https://npmjs.com/package/react-telephone-input",
"text": "npm"
}
]
},
{
"component": "header",
"heading": "react-telephone-input",
"subhead": "React component for entering and validating international telephone numbers",
"children": [
{
"component": "ui/TweetButton",
"text": "react-telephone-input: React component for entering and validating international telephone numbers",
"url": "http://unstack.in/react-telephone-input/"
},
{
"component": "ui/GithubButton",
"user": "mukeshsoni",
"repo": "react-telephone-input"
}
],
"text": "v4.1.2"
},
{
"component": "article",
"metadata": {
"source": "github.readme"
},
"html": "<h1>Reactjs Component for International Telephone Input</h1>\n<p><em>IMP</em>: From 3.*, the styles won't be included by default. Can use <code>require('react-telephone-input/lib/withStyles')</code> to get the styles.</p>\n<p>Inspired from the awesome jquery plugin for <a href=\"https://github.com/Bluefieldscom/intl-tel-input\" target=\"_blank\">International Telephone Input</a>.</p>\n<p>This one is written as a <a href=\"http://facebook.github.io/react/\">reactjs</a> component.</p>\n<p>Live Demo here - <a href=\"http://unstack.in/react-telephone-input/\">http://unstack.in/react-telephone-input/</a></p>\n<p><img src=\"/images/react-telephone-number-screenshot.png?raw=true\"></p>\n<pre><span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">handleInputChange</span>(<span class=\"hljs-params\">telNumber, selectedCountry</span>) </span>{\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">'input changed. number: '</span>, telNumber, <span class=\"hljs-string\">'selected country: '</span>, selectedCountry);\n}\n\n<span class=\"hljs-comment\">// Use declaratively within another react components render method</span>\n<span class=\"hljs-keyword\">var</span> ReactTelInput = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'react-telephone-input'</span>);\n<span class=\"hljs-comment\">// var ReactTelInput = require('react-telephone-input/lib/withStyles'), if you need the styles</span>\n\n<MyAwesomeReactComponent>\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">ReactTelInput</span>\n <span class=\"hljs-attr\">defaultCountry</span>=<span class=\"hljs-string\">"in"</span>\n <span class=\"hljs-attr\">flagsImagePath</span>=<span class=\"hljs-string\">'/path/to/images/flags.png'</span>\n <span class=\"hljs-attr\">onChange</span>=<span class=\"hljs-string\">{handleInputChange}</span>\n <span class=\"hljs-attr\">onBlur</span>=<span class=\"hljs-string\">{handleInputBlur}</span>\n /></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">MyAwesomeReactComponent</span>></span></span>\n\n<span class=\"hljs-comment\">// or render standalone</span>\n<span class=\"hljs-keyword\">var</span> ReactTelInput = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'react-telephone-input'</span>);\nReact.render(<span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">ReactTelInput</span>\n <span class=\"hljs-attr\">defaultCountry</span>=<span class=\"hljs-string\">"in"</span>\n <span class=\"hljs-attr\">flagsImagePath</span>=<span class=\"hljs-string\">'/path/to/images/flags.png'</span>\n <span class=\"hljs-attr\">onChange</span>=<span class=\"hljs-string\">{handleInputChange}/</span>></span>\n onBlur={handleInputBlur}\n document.getElementById('my-container'));</span></pre><p>The component accepts other props to customize it -</p>\n<h4>value and initialValue</h4>\n<p>Both the props have the same purpose - for setting the initial value of the input programatically.</p>\n<h4>initialValue</h4>\n<p>See <code>value</code> above.</p>\n<h4>autoFormat</h4>\n<p><code>true</code> by default. Setting it to false will turn off all auto formatting.</p>\n<h4>defaultCountry</h4>\n<p>The component selects the country code of a country by default. You can change it by passing the iso2 name of a country. E.g. for United States, set <code>defaultCountry</code> to 'us'.</p>\n<h4>onlyCountries</h4>\n<p>If you don't want all countries to be shown in the dropdown list, you can pass an array of country iso2 names to be shown in the dropdown list.</p>\n<h4>preferredCountries</h4>\n<p>Preferred countries show up in the top of the list. This prop also accepts an array of country iso2 names.</p>\n<p>E.g.</p>\n<pre><<span class=\"hljs-symbol\">ReactTelephoneInput</span>\n preferredCountries={[<span class=\"hljs-string\">'in'</span>, <span class=\"hljs-string\">'us'</span>, <span class=\"hljs-string\">'uk'</span>]}\n /></pre><h4>classNames</h4>\n<p>You can send in additional classes to be applied to the top container div of the component.</p>\n<h4>onChange</h4>\n<p>Function, which is called whenever there is a change of value in the input box.</p>\n<h4>onEnterKeyPress</h4>\n<p>Function, which is called when user presses the 'enter' key when the input box is in focus.</p>\n<h4>onBlur</h4>\n<p>Function, which is called when the focus goes away from the input box.</p>\n<h4>onFocus</h4>\n<p>Function, which is called when the input box gets the focus.</p>\n<h4>disabled</h4>\n<p>Boolean value. When set to true, the input box is disabled and clicking on flag dropdown does nothing.</p>\n<h4>pattern</h4>\n<p>String. This is passed on to the input field and works like it should for any other input field.</p>\n<h2>How to use it</h2>\n<ul>\n<li>If you install it from <code>npm install</code>, you can just do <code>var ReactTelephoneInput = require('react-telephone-input');</code></li>\n<li>You will need to copy flags.png from example/src folder to see the flag icons for each country.</li>\n<li>Set the path to the flags image using the prop <code>flagsImagePath</code>\n```js\nfunction handleInputChange(telNumber, selectedCountry) {\n console.log('input changed. number: ', telNumber, 'selected country: ', selectedCountry);\n}</li>\n</ul>\n<p>function handleInputBlur(telNumber, selectedCountry) {\n console.log('Focus off the ReactTelephoneInput component. Tel number entered is: ', telNumber, ' selected country is: ', selectedCountry);\n}</p>\n<p></p>\n<pre>The default value <span class=\"hljs-keyword\">for</span> `flagsImagePath` <span class=\"hljs-keyword\">is</span> 'flags.png'\n\n\n<span class=\"hljs-comment\">## Features</span>\n* Automatically format <span class=\"hljs-keyword\">the</span> <span class=\"hljs-built_in\">number</span> <span class=\"hljs-keyword\">as</span> <span class=\"hljs-keyword\">the</span> user types\n* Navigate <span class=\"hljs-keyword\">the</span> country dropdown <span class=\"hljs-keyword\">by</span> typing a country's <span class=\"hljs-built_in\">name</span>, <span class=\"hljs-keyword\">or</span> using up/down keys\n* Selecting a country <span class=\"hljs-keyword\">from</span> <span class=\"hljs-keyword\">the</span> dropdown will update <span class=\"hljs-keyword\">the</span> dial code <span class=\"hljs-keyword\">in</span> <span class=\"hljs-keyword\">the</span> input\n* Typing a different dial code will automatically update <span class=\"hljs-keyword\">the</span> displayed flag\n* Country names <span class=\"hljs-keyword\">in</span> <span class=\"hljs-keyword\">the</span> dropdown also include localised versions <span class=\"hljs-keyword\">in</span> brackets\n* Dropdown appears <span class=\"hljs-keyword\">above</span> <span class=\"hljs-keyword\">or</span> <span class=\"hljs-keyword\">below</span> <span class=\"hljs-keyword\">the</span> input depending <span class=\"hljs-keyword\">on</span> available <span class=\"hljs-literal\">space</span>/scroll position\n\nYou can <span class=\"hljs-keyword\">try</span> <span class=\"hljs-keyword\">the</span> app <span class=\"hljs-keyword\">by</span> downloading everything <span class=\"hljs-keyword\">and</span> <span class=\"hljs-built_in\">running</span> <span class=\"hljs-keyword\">the</span> commands <span class=\"hljs-keyword\">given</span> <span class=\"hljs-keyword\">below</span> -</pre><p>$ npm install\n$ npm start</p>\n<p>go to your browser and type <code>http://localhost:3000</code>\n```</p>\n"
},
{
"component": "footer",
"links": [
{
"href": "https://github.com/mukeshsoni/react-telephone-input",
"text": "GitHub"
},
{
"href": "https://github.com/mukeshsoni",
"text": "mukeshsoni"
}
]
}
]
}