Data8 TypeScript Packages Demo

A demo project showcasing Data8's TypeScript package for validation and data services, with both React and Vue examples.

Available Demos

• Predictive Address — Address autocomplete
• Email Validation — Email address verification
• Bank Account Validation — Bank account number and sort code checking
• Phone Validation — Check if a phone number is valid

Reusable Predictive Address Components

The demo includes reusable PredictiveAddressInput components for React and Vue:

• demo/react/components/PredictiveAddressInput.tsx
• demo/vue/components/PredictiveAddressInput.vue

They encapsulate the process of implementing Predictive Address into a form, speeding up development. See the PredictiveAddressHostPage files for implementation examples.

Getting Started

Prerequisites

• Node.js

Setup

npm install

Create a .env file in the project root and add your Data8 API key:

API_KEY=your-key-here

If you do not already have a key, create one at:

https://portal.data-8.co.uk/development/api-keys

Running the Demos

# React demo
npm run dev:react

# Vue demo
npm run dev:vue

If API_KEY is missing, each app will stop at startup and display an error message with setup instructions.

Using the Strongly Typed Client

@data8/types supplies OpenAPI types for Data8 services. Pass a service's paths type to openapi-fetch to receive compile-time checks for endpoint paths, request bodies, and response fields, plus IntelliSense autocomplete for each endpoint.

import { EmailValidation } from "@data8/types";
import createClient from "openapi-fetch";

const client = createClient<EmailValidation.paths>({
	baseUrl: "https://webservices.data-8.co.uk",
});

const { data, error } = await client.POST("/EmailValidation/Cleanse.json", {
	headers: { "content-type": "application/json" },
	body: {
		username: "apikey-your-api-key",
		email: "person@example.com",
		level: "Address",
	},
});

if (error) throw new Error("Email validation request failed");
if (!data?.Status?.Success) throw new Error(data?.Status?.ErrorMessage);

console.log(data.Result); // Typed response field, for example "Valid"

Project Structure

Directory	Description
demo/react/	React demo pages
demo/vue/	Vue demo pages

Dependencies

Package	Description
@data8/types	TypeScript type definitions for Data8 web services
openapi-fetch	Type-safe HTTP client for OpenAPI schemas

Scripts

Command	Description
npm run dev:react	Start React demo dev server
npm run dev:vue	Start Vue demo dev server

Documentation

For endpoint details, authentication, and request and response formats, see the Data8 Web Services API documentation.