sethdavis512

import { type ReactNode } from 'react';

interface GridProps {
    children: ReactNode;
    as?: keyof JSX.IntrinsicElements;
    className?: string;
}

export default function Grid({ as = 'div', children, className }: GridProps) {
    const Component = as;

sethdavis512

const getRandomBool = (chance: number = 50): boolean =>
    Math.round(Math.random() * 100) >= chance;

sethdavis512

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/




    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 

sethdavis512

sethdavis512

# Aliases

# Commit handlers
alias ga="git commit --amend"
alias gam="git add . && git commit --amend"
alias gamp="gam && gpf"
alias gp="git push -u origin $(git symbolic-ref --short HEAD)"
alias gpu="git pull"
alias gr="git reset HEAD^"
alias gt="git add . && git commit -m \"TEMP\" --no-verify"

sethdavis512

import type { ReactNode } from 'react';

interface ConditionalWrapperProps {
    condition: boolean;
    wrapper: (children: ReactNode) => ReactNode;
    children: ReactNode;
}

export default function ConditionalWrapper({
    condition,

sethdavis512

jest.mock('../path/to/hooks/useMyHook', () => ({
    __esModule: true,
    default: jest.fn(() => ({
        isLoading: false
    }))
}));

(useMyHook as jest.MockedFunction<any>).mockReturnValue({ isLoading: true });

sethdavis512

As a developer who works on multiple React projects daily, I like having a tool that can help me quickly and efficiently write consistent code. One of the best ways I've found is writing a custom command line tool to rapidly scaffold out my most common code patterns.

My tool of choice is Plop.js. Plop is a powerful "micro-generator framework" built to help maintain patterns as well as speed up your project build time. From the documenation:

If you boil plop down to its core, it is basically glue code between inquirer prompts and handlebar templates.

In this tutorial, we'll build out a simple React component generator for your Typescript projects. By the end, you'll have a fully functioning CLI that is customized to your file generating needs. Let's get started.

Prerequisites

sethdavis512

function getUniqueId(prefix: string, length: number = 8): string {
    let result = `${prefix}-`;

    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    const charactersLength = characters.length;

    let counter = 0;

    while (counter < length) {
        result = `${result}${characters.charAt(Math.floor(Math.random() * charactersLength))}`;

sethdavis512

// Arrow
const buildMockArray = <T>(num: number, content: T): T[] => Array(num).fill(null).map(() => content);

// Traditional
function buildMockArray<T>(num: number, content: T): T[] {
    return Array(num).fill(null).map(() => content);
}