cointickerapi

A small npm package that provides a currency conversion API client and a React component CoinTickerComponent for displaying conversion results.

This repository contains both the TypeScript source and a built distribution in dist/. The package is intended to be consumed by JavaScript and TypeScript projects (including Create React App, Next.js, Vite, etc.).

Table of contents

• Installation
  • From npm (published)
  • Locally (pack / link)
• Usage
  • JavaScript
  • TypeScript
  • React component
• API Reference
  • configureCoinTicker(config)
  • createTickerClient() / CoinTicker class
  • CoinTickerComponent props
• Build & Packaging
• Troubleshooting
  • "Could not find a declaration file for module 'cointickerapi'"
  • Multiple React copies / Invalid hook call
  • Local install file/tarball issues
• Development
• License

Installation

From npm (when published):

npm install cointickerapi
# or
yarn add cointickerapi

Locally (during development) you can either npm pack and install the generated tarball or use npm link:

# In package root (this repo)
npm run build
npm pack
# creates cointickerapi-<version>.tgz

# In your app (test-app or nextjs app)
npm install ../cointickerapi-<version>.tgz
# OR use link
cd /path/to/cointickerapi
npm link
cd /path/to/your-app
npm link cointickerapi

Note: On Windows, prefer using Command Prompt (cmd.exe) for npm pack/install operations if you face path or PowerShell execution policy issues.

Usage

JavaScript (simple)

import { createTickerClient, configureCoinTicker } from 'cointickerapi';

configureCoinTicker({ apiKey: 'YOUR_API_KEY' });
const client = createTickerClient();
client.getTicker('USD', 100).then(console.log).catch(console.error);

TypeScript

import { createTickerClient, configureCoinTicker } from 'cointickerapi';
import type { TickerResponse } from 'cointickerapi';

configureCoinTicker({ apiKey: 'YOUR_API_KEY' });
const client = createTickerClient();
const resp: TickerResponse = await client.getTicker('USD', 100);

React component

import React from 'react';
import { CoinTickerComponent, configureCoinTicker } from 'cointickerapi';

configureCoinTicker({ apiKey: 'YOUR_API_KEY' });

function App() {
  return (
    <CoinTickerComponent
      currency="USD"
      amount={100}
      onSuccess={(data) => console.log('Success', data)}
      onError={(e) => console.error('Error', e)}
      refreshInterval={30000}
    />
  );
}

CoinTickerComponent props (TypeScript):

• currency: string - source currency (e.g. "USD", "EUR")
• amount: number - amount to convert
• onSuccess?: (data: TickerResponse) => void - callback on success
• onError?: (error: Error) => void - callback on error
• refreshInterval?: number - milliseconds between automatic refreshes (default depends on component)
• style?: React.CSSProperties - optional inline style

API Reference

• configureCoinTicker(config: { apiKey: string; baseUrl?: string }) - configure global API key and optional base URL
• createTickerClient(): CoinTicker - create a client instance (has getTicker(from, amount))
• CoinTicker class - exposes getTicker(from: string, amount: number) which returns the API response typed as TickerResponse

TickerResponse (shape may evolve - check src/types/index.ts):

export interface TickerResponse {
  from: string;
  to: string;
  amount: number;
  converted_amount: number;
  exchange_rates?: Record<string, number>;
}

Build & Packaging

The project uses Rollup to build both CommonJS and ESM bundles. The configured outputs are:

• dist/index.js (CommonJS)
• dist/index.esm.js (ESM)
• dist/index.d.ts (TypeScript declarations)

Scripts:

• npm run build - run rollup build
• npm pack - packages the project into a tarball for local install
• npm link - link for local dev

If you publish to npm, ensure types in package.json points to dist/index.d.ts.

Troubleshooting

"Could not find a declaration file for module 'cointickerapi'"

This happens in TypeScript consumers when TypeScript can't find the .d.ts file for the package. To resolve:

1. Build the package so dist/index.d.ts exists:

cd /path/to/cointickerapi
npm run build
npm pack

2. Install the packed tarball into your Next.js / TypeScript app:

cd /path/to/your-next-app
npm install ../cointickerapi-<version>.tgz

3. Ensure your package.json includes the types field at the root of the package and the dist/index.d.ts is included in the tarball. Example in the package package.json:

{
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "files": ["dist"]
}

4. If the package is already installed and you still get the warning in your editor, try restarting your editor/TypeScript server and run npm i again.

5. As a fallback (not recommended long-term): declare the module in your Next.js project by adding a declare module 'cointickerapi'; type file (e.g. types/cointickerapi.d.ts):

// types/cointickerapi.d.ts
declare module 'cointickerapi';

Then include "typeRoots": ["./types", "./node_modules/@types"] in your tsconfig.json if necessary.

Invalid hook call / Multiple React copies

Symptoms: "Invalid hook call. Hooks can only be called inside of the body of a function component." or errors about useState being undefined.

Root causes:

• More than one copy of React in the consumer app and the package. To fix:
  • Mark react and react-dom as peerDependencies in the package's package.json (they should not be bundled). Example:

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
}

• Ensure Rollup externalizes react and react-dom so they are not bundled into the output. In rollup.config.js:

external: ['react', 'react-dom', ...Object.keys(packageJson.peerDependencies || {})]

• Rebuild the package and reinstall it in the app.

Problems installing local tarball (corrupted file / ENOENT)

• Ensure npm pack completed successfully and the .tgz file exists in the package root. Use dir or ls to confirm.
• Use absolute or cmd-friendly paths on Windows when installing with npm install.
• If PowerShell causes issues, use cmd.exe to run the install.

Development

• Source files are in src/.
• The component is in src/components/CoinTickerComponent.tsx.
• Types are in src/types/index.ts.

Suggested workflow for making changes and testing in test-app:

# in package root
npm run build
npm pack

# in test-app
npm uninstall cointickerapi
npm install ../cointickerapi-<version>.tgz
npm start

Or use npm link:

cd /path/to/cointickerapi
npm link
cd /path/to/test-app
npm link cointickerapi
npm start

License

MIT