Box-Of-Hats / no-fuss-react-snippets

A small collection of simple react snippets that you will actually use

no-fuss-react-snippets

A small collection of simple react snippets that you will actually use.

Support for both JSX and TSX (typescript).

Snippets

Import

import React from "react";

Functional component

export const ComponentName = props => {
    return <></>;
};

Arrow function

const FunctionName = args => {};

Use State

const [PropName, setPropName] = useState(InitialValue);

Use Effect

useEffect(() => {}, []);

Material Icon

For use with material.io. Icon name options are provided as a list.

<i className="material-icons">settings</i>

Fragment

<></>

Typescript snippets

Some snippets have slightly altered snippets when typescript is being used.

Functional component (TS)

interface ComponentNameProps {}

export const ComponentName = (props: ComponentNameProps) => {
    return <></>;
};

Use State (TS)

const [PropName, setPropName] = useState<Type>();