Add a New Component Using TypeScript

Enact has a number of ready-to-use components. Each component includes TypeScript typing, allowing them to be easily integrated into a project.

Let’s start by using components from the Sandstone theme in a stateful React component.

Creating a Counter Component

• Create a Counter folder in src/components and add a Counter.tsx file

./src/components/Counter/Counter.tsx

Counter using TypeScript

We can now populate the Counter.tsx file with a simple counter and add the following contents:

import {useState} from "react";
import Button from "@enact/sandstone/Button";

const Counter:React.FC = () => {
  const [count, setCount] = useState<number>(0);

  function increment() {
    setCount(count + 1);
  }

  function decrement() {
    setCount(count - 1);
  }

  function reset() {
    setCount(0);
  }

  return (
    <div>
      <h1>{count}</h1>
      <Button onClick={decrement}>Decrement --</Button>
      <Button onClick={reset}>Reset</Button>
      <Button onClick={increment}>Increment ++</Button>
    </div>
  );
}

export default Counter;

• You’ll also need a package.json in the same directory to indicate the module’s entry point:

./src/components/Counter/package.json

{
    "main": "Counter.tsx"
}

Then, inside of views/MainPanel.tsx, we can import the Counter component:

// Custom component
import Counter from "../components/Counter";

const MainPanel = kind({
  name: "MainPanel",

  render: props => (
    <Panel {...props}>
      <Header title="Hello Enact + TypeScript!" />
      <Counter />
    </Panel>
  )
});

export default MainPanel;

• Run the App in the terminal

npm run serve

TypeScript Counter in the Browser

Next: Component with TypeScript and Enact