Skip to content

Instantly share code, notes, and snippets.

View itispx's full-sized avatar

Px (Guilherme Ciota) itispx

  • Brazil | RS
View GitHub Profile
@itispx
itispx / useKeyboard.js
Created October 27, 2022 19:05
useKeydown hook
import { useEffect } from "react";
const useKeydown = (func, dependencies) => {
useEffect(() => {
document.addEventListener("keydown", func, false);
return () => {
document.removeEventListener("keydown", func, false);
};
}, [func, dependencies]);
@itispx
itispx / useOnScreenIsLeft.js
Created October 14, 2022 06:19
useOnScreenIsLeft hook
import { useEffect } from "react";
import { useNavigation } from "@react-navigation/native";
const useOnScreenIsLeft = (func, dependencies) => {
const navigation = useNavigation();
useEffect(() => {
const unsubscribe = navigation.addListener("blur", () => {
func();
@itispx
itispx / useHeaderHeight.js
Created October 14, 2022 06:18
useHeaderHeight hook
import { getDefaultHeaderHeight } from "@react-navigation/elements";
import {
useSafeAreaFrame,
useSafeAreaInsets,
} from "react-native-safe-area-context";
const useHeaderHeight = () => {
const frame = useSafeAreaFrame();
const insets = useSafeAreaInsets();
@itispx
itispx / useStatusBarStyle.js
Last active November 10, 2022 02:19
useStatusBarStyle hook
import { useEffect } from "react";
import { StatusBar } from "react-native";
/**
*
* @param {"light-content" | "dark-content" | "default"} style
* @param {"light-content" | "dark-content" | "default"} cleanup
*/
const useStatusBarStyle = (style, cleanup) => {
@itispx
itispx / useKeyboard.js
Created October 14, 2022 06:16
useKeyboard hook
import { useState, useEffect } from "react";
import { Keyboard } from "react-native";
const useKeyboard = (keyboardDefaultHeight = 250) => {
const [isKeyboardVisible, setKeyboardVisible] = useState(false);
const [keyboardHeight, setKeyboardHeight] = useState(keyboardDefaultHeight);
async function keyboardDidShowHandler(e) {
setKeyboardVisible(true);
setKeyboardHeight(e.endCoordinates.height);
@itispx
itispx / useBackAction.js
Created October 14, 2022 06:13
useBackAction hook
import { useEffect } from "react";
import { BackHandler } from "react-native";
const useBackAction = (func, dependencies) => {
useEffect(() => {
const backAction = () => {
func();
return true;
};
@itispx
itispx / useTrigger.js
Last active October 14, 2022 06:15
useTrigger hook
import { useEffect, useRef } from "react";
const useTrigger = (func, dependencies) => {
const isInitialMount = useRef(true);
useEffect(() => {
if (isInitialMount.current) {
isInitialMount.current = false;
} else {
func();
@itispx
itispx / .prettierrc
Last active April 5, 2023 13:23
prettier config
{
"trailingComma": "all",
"tabWidth": 2,
"semi": true,
"singleQuote": false,
"useTabs": false,
"printWidth": 120,
"endOfLine": "auto"
}