Skip to main content
CalcChef

React Component Boilerplate

Generate a React function or class component in TypeScript or JavaScript with the hooks you tick, typed props, React.memo or "use client", as a starting point. How it works

Use the React Component Boilerplate

Words are joined in PascalCase and capitals inside a word are kept. Written in the code as MyComponent.

Hooks
Options

Generated Component

import { useState } from 'react';

interface MyComponentProps {
  title?: string;
}

function MyComponent({ title }: MyComponentProps) {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      {title && <h2>{title}</h2>}
      <button type="button" onClick={() => setCount((current) => current + 1)}>
        Count: {count}
      </button>
    </div>
  );
}

export default MyComponent;

A starting point, not a finished component: the title, the counter and the empty effect are placeholders to replace.

About the React Component Boilerplate

With the defaults (TypeScript, a function, useState and a props interface) the generator writes function MyComponent({ title }: MyComponentProps) with a useState counter button and export default MyComponent. It is a starting point with placeholders, the optional title prop and the counter, not a finished or recommended component: tick the hooks and options you want and replace the placeholders with your own code.

Component names

Name typedName in the code
my componentMyComponent
user-profile-cardUserProfileCard
x_y_zXYZ
ReactReactComponent
HTMLDivElementHTMLDivElementComponent
2fastComponent2fast
日本Component日本
(empty)MyComponent

Capitals inside a word are kept. A name that starts with a digit or a letter without capitals gets the prefix Component; one that clashes with an import or the ref type gets the suffix. At most 64 characters.

The import line for each choice

OptionsImport line
Defaultsimport { useState } from 'react';
Classimport React from 'react';
Children propimport React, { useState } from 'react';
useState, useEffect and useRefimport { useState, useEffect, useRef } from 'react';
React.memo wrapperimport React, { useState } from 'react';
No hooks, no props interface(no import line)

React is imported only where the code uses it: React.ReactNode for children, React.memo, React.Component for a class.

How to use this tool

  1. Type the component name; the page shows the PascalCase name it will use.
  2. Pick TypeScript or JavaScript and Function or Class.
  3. Tick the hooks (useState, useEffect, useCallback, useMemo, useRef) and the options: props interface, children prop, arrow function, React.memo wrapper, JSDoc comments, 'use client'.
  4. Copy the code, or Download it as a .tsx or .jsx file named after the component.

Frequently asked questions

How do I create a React component with TypeScript?
Keep TypeScript and Function, type the name and tick the hooks you need. The defaults give import { useState } from 'react';, interface MyComponentProps with title?: string;, the function with const [count, setCount] = useState<number>(0); and export default MyComponent;. Copy it or press Download for MyComponent.tsx.
Can it generate a class component?
Yes. Choose Class and the boxes add state: MyComponentState = { count: 0 } with setState, componentDidMount, a click method and React.createRef; useMemo and Arrow Function are not offered, because they have no class form.
What does the 'use client' option do?
It puts 'use client'; on the first line, which the Next.js App Router reads as the mark of a client component. Leave it off for plain React or for a server component.
Why was my component name changed?
A React component name must be a valid identifier that starts with a capital. my component becomes MyComponent, 2fast becomes Component2fast, and React becomes ReactComponent so it does not clash with the import. The page shows the name it used under the field.
What should I change in the generated component?
The placeholders. Every name the code declares is used, so it type-checks under TypeScript strict mode without unused-variable errors, but the optional title prop, the Count button, the empty useEffect body and the ref on the outer div only show where your code goes. Rename the props interface fields, replace the button with your markup, and delete any hook you ticked but do not need, together with its import.

Function or class, memo or not

Pick Function for new code: hooks only work in function components, and the React docs recommend them over classes. Class is there for an older codebase or for comparing the two forms; it turns useState into this.state and setState, and useEffect into componentDidMount.

Tick React.memo Wrapper only for a component that re-renders often with the same props, such as a row in a long list; the export becomes export default React.memo(MyComponent);. Tick 'use client' for a Next.js App Router file that uses state, effects or event handlers, since a file without it is a server component there.

What the generator writes

The name is turned into PascalCase without changing capitals inside a word (my component becomes MyComponent, user-profile-card becomes UserProfileCard); a name that starts with a digit gets the prefix Component, and one that clashes with an import, such as React, gets the suffix Component. Each ticked hook is imported from react and used in the markup, so no declared name is left unused. In a class, useState becomes state and setState, useEffect becomes componentDidMount, useCallback a click method and useRef React.createRef.

Example: the defaults (TypeScript, function, useState, props interface) give import { useState } from 'react';, an interface MyComponentProps with title?: string;, function MyComponent({ title }: MyComponentProps) with const [count, setCount] = useState<number>(0);, a button showing Count: {count} and export default MyComponent;. Download saves it as MyComponent.tsx.

Related Tools

View all tools
Dev

SVG Code Viewer

Paste SVG code to preview it as an image with scripts, event handlers and outside links removed, list its colors and elements, minify it or export React TSX.

Dev

SQL Query Formatter

Format SQL for Standard SQL, PostgreSQL, MySQL, SQLite or SQL Server, with keywords kept, upper-cased or lower-cased and 2-space, 4-space or tab indents.

Dev

User Agent Parser

Paste a User-Agent string to read the browser, engine, OS and version, device type and model, CPU hints or the crawler it names, with notes on frozen values.

Dev

JSON Diff

Compare two JSON documents side by side or as a list of paths, such as $.name changed from "John" to "Jane". Key order is ignored; numbers compare exactly.

Dev

Subnet Mask Cheat Sheet

Subnet mask table for every IPv4 prefix from /0 to /32: dotted mask, wildcard, total and usable hosts, with /31 counted as 2 (RFC 3021) and /32 as 1.

Dev

Dockerfile Generator

Generate a Dockerfile from a form: pick a language, base image, ports, env vars, build and start commands, then copy or download the file.