🍟 Crunchy Components

The missing html elements

Library of single purpose components.
They work in any modern browser and any framework.
Just import it and use as any other native html element.

👉 They are simple to use...

<script type="module"> import 'https://crunchy-components.us-southeast-1.linodeobjects.com/countrySelect.wc.js' </script> <country-select value="Iceland"></country-select>
Example usage

List of Components

Country select

A searchable selectbox of 246 countries.

Features

Tag

<country-select>

Get it at

https://crunchy-components.us-southeast-1.linodeobjects.com/countrySelect.wc.js

Attributes

value
Description
Currently selected country
Value
String
Country name or ISO code of the country.
Example
Germany, de
name
Description
Name of the input field which will be used when submited in the form.
Value
String
Arbitrary name
Default
country_select
Example
selected_country

Props

only
Description
Subset of countries to show in the list.
Value
String[]
Country names or ISO codes of the countries.
Example
["Germany", "gb"]
except
Description
List of countries to exclude from list
Value
String[]
Country names or ISO codes of the countries.
Example
["Germany", "gb"]

Example usage

<country-select value="Iceland"></country-select> <script type="module"> import 'https://crunchy-components.us-southeast-1.linodeobjects.com/countrySelect.wc.js'; const countrySelect = document.querySelector('country-select'); countrySelect.except = ['Germany', 'gb']; </script>
Try it out!

Result

Dial code select

A searchable selectbox of 246 dial codes.

Features

Tag

<dial-code-select>

Get it at

https://crunchy-components.us-southeast-1.linodeobjects.com/dialCodeSelect.wc.js

Attributes

value
Description
Currently selected dial code
Value
String
Country name, ISO code of the country or dial code.
Example
Germany, de, +420
name
Description
Name of the input field which will be used when submited in the form.
Value
String
Arbitrary name
Default
dial_code_select
Example
selected_dial_code

Props

only
Description
Subset of dial codes to show in the list.
Value
String[]
Country name, ISO code of the country or dial code.
Example
["Germany", "gb", "+420"]
except
Description
List of dial codes to exclude from the list
Value
String[]
Country name, ISO code of the country or dial code.
Example
["Germany", "gb", "+420"]

Example usage

<dial-code-select value="+420"></dial-code-select> <script type="module"> import 'https://crunchy-components.us-southeast-1.linodeobjects.com/dialCodeSelect.wc.js'; </script>
Try it out!

Result

Phone number input

A searchable selectbox of 246 dial codes with input for phone number.

Features

Tag

<phone-number-input>

Get it at

https://crunchy-components.us-southeast-1.linodeobjects.com/phoneNumberInput.wc.js

Attributes

prefix
Description
Currently selected dial code
Value
String
Country name, ISO code of the country or dial code.
Example
Germany, de, +420
phone-number
Description
Currently inputed phone number
Value
String
Any phone number
Example
555-000-000
prefix-input-name
Description
Name of the input field where prefix code gets submited when used in form element.
Value
String
Any name
Default
String
phone_number_input_prefix
Example
phone_number_prefix
phone-number-input-name
Description
Name of the input field where phone number gets submited when used in form element.
Value
String
Any name
Default
String
phone_number_input_value
Example
phone_number

Props

only
Description
Subset of dial codes to show in the list.
Value
String[]
Country name, ISO code of the country or dial code.
Example
["Germany", "gb", "+420"]
except
Description
List of dial codes to exclude from the list
Value
String[]
Country name, ISO code of the country or dial code.
Example
["Germany", "gb", "+420"]

Example usage

<phone-number-input prefix="+420"></phone-number-input> <script type="module"> import 'https://crunchy-components.us-southeast-1.linodeobjects.com/phoneNumberInput.wc.js'; </script>
Try it out!

Result

Code snippet

Place any code in between the tags (including HTML) without need to escape it *

Features

Tag

<code-snippet>

Get it at

https://crunchy-components.us-southeast-1.linodeobjects.com/codeSnippet.wc.js

Example usage

Hello

&lt;script type="module"&gt; console.log('hello'); &lt;/script&gt; <script type="module"> import 'https://crunchy-components.us-southeast-1.linodeobjects.com/codeSnippet.wc.js'; </script>

*You need to escape script tag by yourself by using "&lt;" otherwise it will be interpreted as regular script tag and code executes before this component gets a chance to escape it.

This happens because html is parsed before the component is executed and has chance to escape it.

Result

Hello

<script type="module"> console.log('hello'); </script>