React TypeScript Stateless Component Examples

SimpleStateless.tsx

// various examples of typescript stateless component declarations

import * as React from "react";
import {MouseEventHandler} from "react";

////////////////

interface IVerboseStatelessComponentProps extends React.HTMLProps<JSX.Element> {
    myvar: string;
    onClick: () => void;
}

export const VerboseStatelessComponent: React.StatelessComponent<IVerboseStatelessComponentProps> =
    (props: IVerboseStatelessComponentProps): JSX.Element => {
    return (
        <div onClick={props.onClick}>Hello, {props.myvar} </div>
    );
};

////////////////

export const SimpleStatelessComponent = ({myvar, onClick}: {myvar: string, onClick: () => void}) : JSX.Element => {
   return (
       <div onClick={onClick}>Hello, {myvar}</div>
   );
};

////////////////

interface IAnotherSimpleStatelessComponentProps extends React.HTMLProps<JSX.Element> {
    myvar: string;
    onClick?: React.MouseEventHandler<JSX.Element | HTMLElement>;
}

export const AnotherSimpleStatelessComponent = ({myvar, onClick}: IAnotherSimpleStatelessComponentProps) : JSX.Element => {
   return (
       <div onClick={onClick}>Hello {myvar} </div>
   );
};

////////////////

export const TerseStatelessComponent = ({myvar, onClick}) => {
    return (
        <div onClick={onClick}>Hello, {myvar}</div>
    );
};

////////////////

interface IReallyVerboseStatelessComponentProps<T extends HTMLElement | JSX.Element> extends React.HTMLProps<JSX.Element> {
    myvar: string;
    onClick?: MouseEventHandler<JSX.Element | HTMLElement>;
}

export const ReallyVerboseStatelessComponent: React.StatelessComponent<IReallyVerboseStatelessComponentProps<HTMLDivElement>> =
    (props: IReallyVerboseStatelessComponentProps<HTMLDivElement>): JSX.Element => {
    return (
        <div onClick={props.onClick}>Hello {props.myvar} </div>
    );
};