React Functional Component (FC)

Create files based on this template with:

npx @lukasbach/scripts template react-fc

After installing ldo with npm install -g @lukasbach/scripts, you can use any of the shortcuts fc to run this script, such as:

npm install -g @lukasbach/scripts
ldot fc

Variables

• name: Component Name (default: MyComponent)
  • Specify with --name <value>

Files

Running the template will create the following files:

Component (./{{ kebabCase name }}.tsx)

import { FC } from "react";

export const {{ pascalCase name }}: FC<{}> = ({}) => {
  return (
    <>
      hello
    </>
  );
};

Jest (./{{ kebabCase name }}.spec.ts)

This file will only be created when called with --jest.

import { render } from "@testing-library/react";
import { {{ pascalCase name}} } from "./{{ kebabCase name }}";

describe("{{ kebabCase name }}", () => {
  it("should render", () => {
    const { getByText } = render(<{{ pascalCase name}} />);
    expect(getByText("hello")).toBeInTheDocument();
  });
});

Vitest (./{{ kebabCase name }}.spec.ts)

This file will only be created when called with --vitest.

import { describe, expect, it } from "vitest";
import { render } from "@testing-library/react";
import { {{ pascalCase name}} } from "./{{ kebabCase name }}";

describe("{{ kebabCase name }}", () => {
  it("should render", () => {
    const { getByText } = render(<{{ pascalCase name}} />);
    expect(getByText("hello")).toBeInTheDocument();
  });
});