new-tsx v1.1.2

new-tsx

Avoid writing boilerplate! Create new TypeScript React components via the command line.

Installation

npm i -g new-tsx to install as a global command line tool.

Usage

new-tsx MyNewComponent

Creates a file at ./src/components/MyNewComponent.tsx with the boilerplate for a new React component class inside.

If you want to create a functional component (instead of a class-based component), use the -f flag: new-tsx MyFunctionalComponent -f

Class Component Boilerplate

import * as React from "react";

interface NewComponentProps {}

interface NewComponentState {}

const initialState: NewComponentState = {};

export class NewComponent extends React.Component<
  NewComponentProps,
  NewComponentState
> {
  constructor(props: NewComponentProps) {
    super(props);
    this.state = initialState;
  }

  render() {
    return (
      <>
        <p>New Stateful Class Component!</p>
      </>
    );
  }
}

Function Component Boilerplate

import * as React from "react";

interface NewComponentProps {}

export function NewComponent(props: NewComponentProps) {
  return (
    <>
      <p>New Stateless Function Component!</p>
    </>
  );
}

License

MIT