Skip to main content

TypeScript Guide

Using Retro Floppy with TypeScript.

Type Imports​

Import types from the package:

import {
  FloppyDisk,
  FloppyDiskProps,
  FloppyTheme,
  FloppyLabel,
} from 'retro-floppy';

Typed Props​

Use types for props:

const props: FloppyDiskProps = {
  size: 'medium',
  label: {
    name: 'My File',
    author: 'John Doe',
  },
};

<FloppyDisk {...props} />

Custom Theme Type​

Type your custom themes:

const myTheme: FloppyTheme = {
  diskColor: '#ff6b6b',
  labelColor: '#fff',
};

Generic Components​

Create typed wrapper components:

interface FileData {
  id: number;
  name: string;
  author: string;
}

function FileDisk({ file }: { file: FileData }) {
  return (
    <FloppyDisk
      label={{
        name: file.name,
        author: file.author,
      }}
    />
  );
}