With this code snippet, you can use Ionicons in your React + TypeScript project with code completion and without any errors from React side.
- Copy the content of the
ion-icons.d.ts
file. - Add scripts inside your
<head>
tags.
<head>
#!/bin/zsh | |
# A small command line tool for easier development on [`refine`](https://refine.dev) | |
version="1.7.0" | |
name="\e[35m[refine-development]\e[0m" | |
all_args=("$@") | |
first_arg="$1" | |
scopes_array=() |
/* | |
* Using destructuring, we can remove a dynamic key from an object without `delete` keyword in one line. | |
*/ | |
const baseObj = { a: 1, b: 2, c: 3 }; | |
const removeKey = "b"; | |
const { [removeKey]: _remove, ...newObj } = baseObj; |
const emailRegexp = | |
/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/i; | |
const alphabeticRegexp = /^[a-zA-Z\s]*$/g; | |
const specialsRegexp = /[`\+=\?!\]\[\$}{:\/&\\@#\|<>;]/g; | |
const nonNumericRegexp = /\D/g; | |
export const isEmail = (email?: string | number | undefined) => { | |
return Boolean(`${email ?? ''}`.match(emailRegexp)); | |
}; |
With this code snippet, you can use Ionicons in your React + TypeScript project with code completion and without any errors from React side.
ion-icons.d.ts
file.<head>
tags.<head>
[ | |
{ | |
"key": "ctrl+]", | |
"command": "workbench.action.nextSideBarView" | |
}, | |
{ | |
"key": "ctrl+[", | |
"command": "workbench.action.previousSideBarView" | |
}, | |
{ |
const SearchView = ({navigation}) => { | |
const heroAnim = useRef(new Animated.Value(1)).current | |
const [isSearchFocus, setSearchFocus] = useState(false) | |
useEffect(() => { | |
if(isSearchFocus) { | |
Animated.timing(heroAnim, { | |
toValue: 1, | |
duration: 230, | |
useNativeDriver: false, |
{ | |
"Custom Color Snippet": { | |
"prefix": "customcolor", | |
"body": [ | |
"Map<int, Color> $4 = {", | |
"\t50:Color.fromRGBO($1, $2, $3, .1),", | |
"\t100:Color.fromRGBO($1, $2, $3, .2),", | |
"\t200:Color.fromRGBO($1, $2, $3, .3),", | |
"\t300:Color.fromRGBO($1, $2, $3, .4),", | |
"\t400:Color.fromRGBO($1, $2, $3, .5),", |
<div class="container"> | |
<div class="row"> | |
<div class="col col-md-6 offset-md-3"> | |
<header> | |
<div class="head float-none text-center"><h1>Simon Game</h1></div> | |
<div class="settings float-left"> | |
<a id="start-btn" class="btn btn-sm btn-info">Start</a> | |
<a id="strict-toggle" class="btn btn-sm btn-dark">Strict</a> | |
</div> | |
<div class="level float-right"><span class="curr-level">0</span>/20</div> |