Skip to content

Instantly share code, notes, and snippets.

View DarlonHenrique's full-sized avatar
🎯
Focusing

Darlon Henrique DarlonHenrique

🎯
Focusing
View GitHub Profile
@DarlonHenrique
DarlonHenrique / Form.js
Created October 29, 2021 04:56
simple reactive and flexible react form
import React from 'react'
import useFetch from '../hooks/useFetch'
const formFields = [
{
id: 'nome',
label: 'Nome',
type: 'text'
},
{
@DarlonHenrique
DarlonHenrique / useFetch.js
Created October 29, 2021 04:58
a custom hook for make easy and util fetch's with loading and error state using react
import React from 'react'
const useFetch = () => {
const [data, setData] = React.useState(null)
const [error, setError] = React.useState(null)
const [loading, setLoading] = React.useState(null)
const request = React.useCallback(async (url, options) => {
let response
let json
"use client"
import { useRef } from "react"
import { ChevronLeft } from "../../public/icons/chevron-left"
import { ChevronRight } from "../../public/icons/chevron-right"
export type currentDate = {
day: number,
month: {
name: string,
number: number,
@DarlonHenrique
DarlonHenrique / query-result.js
Last active June 22, 2023 16:27
Query Results conditionally renders Apollo useQuery hooks states: loading, error or its children when data is ready.
import React from 'react';
// usage example:
/*
<QueryResult error={error} loading={loading} data={data}>
{data?.tracksForHome?.map((track) => <TrackCard key={track.id} track={track} />))}
</QueryResult>
*/
@DarlonHenrique
DarlonHenrique / heading.tsx
Created July 6, 2023 17:29
Heading Component
interface HeadingProps {
children: React.ReactNode
}
import { Slot } from '@radix-ui/react-slot'
import {cva, type VariantProps} from 'class-variance-authority'
import { cn } from "@/lib/utils"
import React from 'react'
const headingVariants = cva(
@DarlonHenrique
DarlonHenrique / CustomScrollView.tsx
Created August 16, 2023 19:25
simple scrollview with a custom Scrollbar Using React native, native wind, typescript and math
import { StyledComponent } from "nativewind"
import { ReactNode, useState } from "react"
import {
LayoutChangeEvent,
NativeScrollEvent,
NativeSyntheticEvent,
ScrollView,
View,
} from "react-native"
@DarlonHenrique
DarlonHenrique / exposeWSLPort.bat
Created August 20, 2023 20:29
Expo the localhost of wsl to you local internet
$remoteport = bash.exe -c "ip addr | grep -Ee 'inet.*eth0'"
$found = $remoteport -match '\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}';
if( $found ){
$remoteport = $matches[0];
} else{
echo "The Script Exited, the ip address of WSL 2 cannot be found";
exit;
}
@DarlonHenrique
DarlonHenrique / hackerText.tsx
Last active August 20, 2023 20:55
component with cool hacker effect in the letters
'use client'
import React, { useEffect, useRef } from 'react'
import { VariantProps, tv } from 'tailwind-variants'
const textStyle = tv({
base: 'text-6xl font-bold font-mono text-black dark:text-white',
variants: {
size: {
sm: 'text-sm',
md: 'text-base',
@DarlonHenrique
DarlonHenrique / DismissKeyboardView.tsx
Created August 21, 2023 13:38
helper to dismiss the keyboard on React Native when click on the view
import { StyledComponent } from 'nativewind'
import React from 'react';
import { TouchableWithoutFeedback, Keyboard, View } from 'react-native';
interface DismissKeyboardViewProps {
children: React.ReactNode
className?: string
}
export function DismissKeyboardView({children, ...props}: DismissKeyboardViewProps) {