React Functional Component (FC) with Module CSS Stylesheet

Create files based on this template with:

npx @lukasbach/scripts template react-fc-modulecss

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

npm install -g @lukasbach/scripts
ldot fcmcss

Variables

• name: Component Name (default: MyComponent)
  • Specify with --name <value>
• stylesheet: Stylesheet File name (default: {{ camelCase name }})
  • Specify with --stylesheet <value>

Files

Running the template will create the following files:

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

import { FC } from "react";
import * as styles from "./{{ kebabCase stylesheet }}.css";

export const {{ pascalCase name }}: FC<{}> = ({}) => {
  return (
    <div className={styles.container}>
      hello
    </div>
  );
};

Stylesheet (./{{ kebabCase stylesheet }}.css)

.container {
}

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();
  });
});