Skip to content

Instantly share code, notes, and snippets.

View maiconrs95's full-sized avatar
🐛
- Under construction

Maicon Silva maiconrs95

🐛
- Under construction
View GitHub Profile
@maiconrs95
maiconrs95 / Show.tsx
Last active May 2, 2024 19:42
Custom Show React component
export type Props = {
children: React.ReactNode;
};
function Show({
when,
children,
}: Props & {
when?: boolean | null;
}): JSX.Element | null {
@maiconrs95
maiconrs95 / objectToQueryParams.ts
Created April 11, 2024 13:53
Convert object to search params
/**
* Converts an object into formatted URL query parameters.
* @param {Object} obj - The object to be converted into query parameters.
* @returns {string} A string containing the formatted query parameters.
*/
export function objectToQueryParams(obj: { [key: string]: string | number | boolean }): string {
const queryParams: string[] = [];
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
@maiconrs95
maiconrs95 / usePostMessageState.ts
Created March 19, 2024 19:12
A custom hook to help post message state management
import { useEffect, useState } from 'react';
export function isDevelopment() {
return process.env.NODE_ENV === 'development';
}
const domain = `${isDevelopment() ? 'http' : 'https'}://${window.location.host}`;
const addPrefix = (key: string) => `some-prefix-${key}`;
@maiconrs95
maiconrs95 / use-url-search-params.ts
Last active March 28, 2024 18:56
Custom react -router query params management
import { useCallback } from 'react';
import { useSearchParams } from 'react-router-dom';
type Value = string | number;
type Query = {
key: string;
value?: Value;
};
@maiconrs95
maiconrs95 / use-wizard.js
Created March 6, 2024 19:08
React wizard stepper
import * as React from 'react';
const handleNextStep = maxStep => currentStep => {
if (maxStep) {
if (currentStep < maxStep) return currentStep + 1;
return currentStep;
}
return currentStep + 1;
};
@maiconrs95
maiconrs95 / useOneClickOutside.ts
Created March 1, 2024 16:44
Check click outside element target
import { useEffect, useState, useRef } from "react";
function useOneClickOutside() {
const node = useRef(null);
const [open, setOpen] = useState(false);
const handleClickOutside = (e) => {
if (node.current.contains(e.target)) {
return;
}
export const paginateArray = <T>(arr: T[] = [], size: number = 10): T[][] =>
arr.reduce<T[][]>((acc, val, i) => {
const idx = Math.floor(i / size);
const page = acc[idx] || (acc[idx] = []);
page.push(val);
return acc;
}, []);
@maiconrs95
maiconrs95 / updateByListKey.ts
Last active August 2, 2023 16:59
Used to update current list with next list values using some list key
/**
* Update "current" list with "next" list values using some valid list key
*
* @param current "current" list
* @param next "next" list containing values to update into "current" list
* @param key used to map values to be updated
* @returns updated list
*/
export function updateByListKey<T>(current: T[], next: T[], key: keyof T): T[] {
const listMap = new Map();
@maiconrs95
maiconrs95 / use-on-screen.ts
Created January 16, 2023 13:44
React Intersection observer hook
import { useCallback, useState } from 'react';
import * as React from 'react';
type Result = {
measureRef: (node: unknown) => void;
isIntersecting: boolean;
observer?: IntersectionObserver;
};
@maiconrs95
maiconrs95 / usePaginatedList.ts
Last active January 11, 2023 19:19
Custom React hook to paginate array list
import * as React from 'react';
export const paginateArray = (arr = [], size = 10) =>
arr.reduce((acc, val, i) => {
const idx = Math.floor(i / size);
const page = acc[idx] || (acc[idx] = []);
page.push(val);
return acc;