Socket
Socket
Sign inDemoInstall

use-upbit-api

Package Overview
Dependencies
Maintainers
1
Versions
25
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

use-upbit-api - npm Package Compare versions

Comparing version 1.1.5 to 2.0.0

index.ts
lib/jest.setup.d.ts
lib/jest.setup.js
lib/src/functions/getLastBuffers.d.ts
lib/src/functions/getLastBuffers.js
lib/src/functions/socketDataEncoder.d.ts
lib/src/functions/socketDataEncoder.js
lib/src/functions/sortBuffers.d.ts
lib/src/functions/sortBuffers.js
lib/src/functions/updateQueueBuffer.d.ts
lib/src/functions/updateQueueBuffer.js
lib/src/functions/updateSocketData.d.ts
lib/src/functions/updateSocketData.js
lib/src/hooks/useFetchMarketCode.d.ts
lib/src/hooks/useFetchMarketCode.js
lib/src/hooks/useWsOrderbook.d.ts
lib/src/hooks/useWsOrderbook.js
lib/src/hooks/useWsTicker.d.ts
lib/src/hooks/useWsTicker.js
lib/src/hooks/useWsTrade.d.ts
lib/src/hooks/useWsTrade.js
lib/src/interfaces.d.ts
lib/src/interfaces.js
lib/test/generators/generateTicker.d.ts
lib/test/generators/generateTicker.js
lib/test/generators/generateTrade.d.ts
lib/test/generators/generateTrade.js
lib/test/unit/functions/getLastBuffers.test.d.ts
lib/test/unit/functions/getLastBuffers.test.js
lib/test/unit/functions/socketDataEncoder.test.d.ts
lib/test/unit/functions/socketDataEncoder.test.js
lib/test/unit/functions/sortBuffers.test.d.ts
lib/test/unit/functions/sortBuffers.test.js
lib/test/unit/functions/updateQueueBuffer.test.d.ts
lib/test/unit/functions/updateQueueBuffer.test.js
lib/test/unit/functions/updateSocketData.test.d.ts
lib/test/unit/functions/updateSocketData.test.js
lib/test/unit/hooks/useFetchMarketCode.test.d.ts
lib/test/unit/hooks/useFetchMarketCode.test.js
lib/test/unit/hooks/useWsOrderbook.test.d.ts
lib/test/unit/hooks/useWsOrderbook.test.js
lib/test/unit/hooks/useWsTicker.test.d.ts
lib/test/unit/hooks/useWsTicker.test.js
lib/test/unit/hooks/useWsTrade.test.d.ts
lib/test/unit/hooks/useWsTrade.test.js

109

lib/index.d.ts

@@ -1,104 +0,5 @@

export interface ImarketCodes {
market: string;
korean_name: string;
english_name: string;
}
export declare type RequestType = "ticker" | "orderbook" | "trade";
export declare type ChangeType = "RISE" | "EVEN" | "FALL";
export declare type OrderType = "ASK" | "BID";
export declare type MarketStateType = "PREVIEW" | "ACTIVE" | "DELISTED";
export declare type MarketWarningType = "NONE" | "CAUTION";
export declare type StreamType = "SNAPSHOT" | "REALTIME";
export interface ITicker {
type: RequestType;
code: string;
opening_price: number;
high_price: number;
low_price: number;
trade_price: number;
prev_closing_price: number;
acc_trade_price: number;
change: ChangeType;
change_price: number;
signed_change_price: number;
change_rate: number;
signed_change_rate: number;
ask_bid: OrderType;
trade_volume: number;
acc_trade_volume: number;
trade_date: string;
trade_time: string;
trade_timestamp: number;
acc_ask_volume: number;
acc_bid_volume: number;
highest_52_week_price: number;
highest_52_week_date: string;
lowest_52_week_price: number;
lowest_52_week_date: string;
market_state: MarketStateType;
is_trading_suspended: false;
delisting_date?: Date;
market_warning: MarketWarningType;
timestamp: number;
acc_trade_price_24h: number;
acc_trade_volume_24h: number;
stream_type: StreamType;
}
export interface IOrderbookUnit {
ask_price: number;
bid_price: number;
ask_size: number;
bid_size: number;
}
export interface IOrderbook {
type: RequestType;
code: string;
timestamp: number;
total_ask_size: number;
total_bid_size: number;
orderbook_units: IOrderbookUnit[];
stream_type: StreamType;
}
export interface ITrade {
type: RequestType;
code: string;
timestamp: number;
trade_date: string;
trade_time: string;
trade_timestamp: number;
trade_price: number;
trade_volume: number;
ask_bid: OrderType;
prev_closing_price: number;
change: ChangeType;
change_price: number;
sequential_id: number;
stream_type: StreamType;
}
export interface TickerInterface {
socket: WebSocket | null;
isConnected: boolean;
socketData: ITicker[];
}
export interface OrderbookInterface {
socket: WebSocket | null;
isConnected: boolean;
socketData: IOrderbook;
}
export interface TradeInterface {
socket: WebSocket | null;
isConnected: boolean;
socketData: ITrade[];
}
export declare function useUpbitWebSocket(targetMarketCodes?: ImarketCodes[], type?: RequestType, options?: {
throttle_time: number;
max_length_queue: number;
}): {
socket: WebSocket | null;
isConnected: boolean;
socketData: any;
};
export declare function useFetchMarketCode(): {
isLoading: boolean;
marketCodes: ImarketCodes[];
};
import useFetchMarketCode from './src/hooks/useFetchMarketCode';
import useWsOrderbook from './src/hooks/useWsOrderbook';
import useWsTrade from './src/hooks/useWsTrade';
import useWsTicker from './src/hooks/useWsTicker';
export { useFetchMarketCode, useWsOrderbook, useWsTrade, useWsTicker };

319

lib/index.js
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useFetchMarketCode = exports.useUpbitWebSocket = void 0;
var react_1 = require("react");
var lodash_1 = require("lodash");
var socketDataEncoder = function (socketData) {
try {
var encoder = new TextDecoder("utf-8");
var rawData = new Uint8Array(socketData);
var data = JSON.parse(encoder.decode(rawData));
return data;
}
catch (error) {
console.error(error);
}
};
var typeChecker = function (type) {
try {
var isValid = true;
if (type != "ticker" && type != "orderbook" && type != "trade") {
isValid = false;
}
return isValid;
}
catch (error) {
console.error(error);
}
};
var getLastBuffers = function (buffer, maxNumResult) {
try {
var result = [];
for (var i = buffer.length - 1; i >= 0; i--) {
var isExist = false;
for (var j = 0; j < result.length; j++) {
if (result[j].code === buffer[i].code) {
isExist = true;
}
else
continue;
}
if (!isExist)
result.push(buffer[i]);
else {
if (maxNumResult <= result.length)
break;
else
continue;
}
}
return result;
}
catch (error) {
console.error(error);
}
};
var sortBuffers = function (originalBuffers, sortOrder) {
try {
var result = [];
for (var i = 0; i < sortOrder.length; i++) {
var targetCode = sortOrder[i].market;
for (var j = 0; j < originalBuffers.length; j++) {
if (targetCode === originalBuffers[j].code) {
result.push(originalBuffers[j]);
break;
}
else
continue;
}
}
return result;
}
catch (error) {
console.error(error);
}
};
var updateSocketData = function (origininalData, newData) {
try {
var copyOriginal = (0, lodash_1.cloneDeep)(origininalData);
var copyNew = (0, lodash_1.cloneDeep)(newData);
if (copyOriginal && newData) {
for (var i = 0; i < copyOriginal.length; i++) {
var target = copyOriginal[i];
for (var j = 0; j < newData.length; j++) {
if (target.code === newData[j].code) {
copyOriginal[i] = newData[j];
copyNew[j] = null;
break;
}
else
continue;
}
}
// 원본 데이터에 없는 market 데이터가 새롭게 받은 데이터에 존재하는 case
var remainNew = copyNew.filter(function (element) { return element !== null; });
if (remainNew.length > 0) {
copyOriginal.push.apply(copyOriginal, remainNew);
}
}
return copyOriginal;
}
catch (error) {
console.error(error);
}
};
var updateQueueBuffer = function (buffer, maxSize) {
try {
var copyBuffer = (0, lodash_1.cloneDeep)(buffer);
while (copyBuffer.length >= maxSize) {
copyBuffer.shift();
}
return copyBuffer;
}
catch (error) {
console.error(error);
}
};
function useUpbitWebSocket(targetMarketCodes, type, options) {
if (targetMarketCodes === void 0) { targetMarketCodes = [
{
market: "KRW-BTC",
korean_name: "비트코인",
english_name: "Bitcoin",
},
]; }
if (type === void 0) { type = "ticker"; }
if (options === void 0) { options = { throttle_time: 400, max_length_queue: 100 }; }
var SOCKET_URL = "wss://api.upbit.com/websocket/v1";
var throttle_time = options.throttle_time, max_length_queue = options.max_length_queue;
var socket = (0, react_1.useRef)(null);
var buffer = (0, react_1.useRef)([]);
var _a = (0, react_1.useState)(false), isConnected = _a[0], setIsConnected = _a[1];
var _b = (0, react_1.useState)([]), loadingBuffer = _b[0], setLoadingBuffer = _b[1];
var _c = (0, react_1.useState)(), socketData = _c[0], setSocketData = _c[1];
var throttled = (0, react_1.useCallback)((0, lodash_1.throttle)(function () {
try {
var lastBuffers = getLastBuffers(buffer.current, targetMarketCodes.length);
switch (type) {
case "ticker":
var sortedBuffers = sortBuffers(lastBuffers, targetMarketCodes);
setLoadingBuffer(sortedBuffers);
buffer.current = [];
break;
case "orderbook":
if (lastBuffers)
setSocketData(lastBuffers[0]);
buffer.current = [];
break;
case "trade":
var updatedBuffer = updateQueueBuffer(buffer.current, max_length_queue);
buffer.current = updatedBuffer;
setSocketData(updatedBuffer);
break;
default:
break;
}
}
catch (error) {
throw new Error();
}
}, throttle_time), [targetMarketCodes]);
// socket 세팅
(0, react_1.useEffect)(function () {
try {
var isTypeValid = typeChecker(type);
if (!isTypeValid) {
console.error("[Error] | input type is unknown. (input type should be 'ticker' or 'orderbook' or 'trade')");
throw new Error();
}
if (type === "orderbook" || type === "trade") {
if (targetMarketCodes.length > 1) {
console.error("[Error] | 'Length' of Target Market Codes should be only 'one' in 'orderbook' and 'trade'. you can request only 1 marketcode's data, when you want to get 'orderbook' or 'trade' data.");
throw new Error();
}
}
if (targetMarketCodes.length > 0 && !socket.current) {
socket.current = new WebSocket(SOCKET_URL);
socket.current.binaryType = "arraybuffer";
var socketOpenHandler = function () {
var _a;
setIsConnected(true);
console.log("[연결완료] | socket Open Type: ", type);
if (((_a = socket.current) === null || _a === void 0 ? void 0 : _a.readyState) == 1) {
var sendContent = [
{ ticket: "test" },
{
type: type,
codes: targetMarketCodes.map(function (code) { return code.market; }),
},
];
socket.current.send(JSON.stringify(sendContent));
console.log("message sending done");
}
};
var socketCloseHandler = function () {
setIsConnected(false);
setLoadingBuffer([]);
setSocketData(null);
buffer.current = [];
console.log("연결종료");
};
var socketErrorHandler = function (error) {
console.error("[Error]", error);
};
var socketMessageHandler = function (evt) {
var data = socketDataEncoder(evt.data);
buffer.current.push(data);
throttled();
};
socket.current.onopen = socketOpenHandler;
socket.current.onclose = socketCloseHandler;
socket.current.onerror = socketErrorHandler;
socket.current.onmessage = socketMessageHandler;
}
return function () {
if (socket.current) {
if (socket.current.readyState != 0) {
socket.current.close();
socket.current = null;
}
}
};
}
catch (error) {
throw new Error();
}
}, [targetMarketCodes]);
(0, react_1.useEffect)(function () {
try {
if (loadingBuffer.length > 0) {
if (!socketData) {
setSocketData(loadingBuffer);
}
else {
setSocketData(function (prev) {
return updateSocketData(prev, loadingBuffer);
});
setLoadingBuffer([]);
}
}
}
catch (error) {
console.log(error);
}
}, [loadingBuffer]);
return { socket: socket.current, isConnected: isConnected, socketData: socketData };
}
exports.useUpbitWebSocket = useUpbitWebSocket;
function useFetchMarketCode() {
var _this = this;
var REST_API_URL = "https://api.upbit.com/v1/market/all?isDetails=false";
var options = { method: "GET", headers: { Accept: "application/json" } };
var _a = (0, react_1.useState)(true), isLoading = _a[0], setIsLoading = _a[1];
var _b = (0, react_1.useState)([]), marketCodes = _b[0], setMarketCodes = _b[1];
var fetchMarketCodes = (0, react_1.useCallback)(function () { return __awaiter(_this, void 0, void 0, function () {
var response, result;
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, fetch(REST_API_URL, options)];
case 1:
response = _a.sent();
return [4 /*yield*/, response.json()];
case 2:
result = _a.sent();
setMarketCodes(result);
setIsLoading(false);
return [2 /*return*/];
}
});
}); }, []);
(0, react_1.useEffect)(function () {
fetchMarketCodes();
}, []);
return { isLoading: isLoading, marketCodes: marketCodes };
}
exports.useFetchMarketCode = useFetchMarketCode;
exports.useWsTicker = exports.useWsTrade = exports.useWsOrderbook = exports.useFetchMarketCode = void 0;
const useFetchMarketCode_1 = __importDefault(require("./src/hooks/useFetchMarketCode"));
exports.useFetchMarketCode = useFetchMarketCode_1.default;
const useWsOrderbook_1 = __importDefault(require("./src/hooks/useWsOrderbook"));
exports.useWsOrderbook = useWsOrderbook_1.default;
const useWsTrade_1 = __importDefault(require("./src/hooks/useWsTrade"));
exports.useWsTrade = useWsTrade_1.default;
const useWsTicker_1 = __importDefault(require("./src/hooks/useWsTicker"));
exports.useWsTicker = useWsTicker_1.default;

49

package.json
{
"name": "use-upbit-api",
"version": "1.1.5",
"version": "2.0.0",
"description": "This is React Custom Hook for upbit api",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"module": "lib/index.js",
"scripts": {
"build": "tsc"
"build": "rm -rf ./lib/ && tsc",
"lint": "./node_modules/.bin/eslint .",
"test": "jest",
"pre-test": "npm run build && npm run lint && npm run test",
"clear-jest": "jest --clearCache",
"publish-npm": "npm run pre-test && npm publish"
},

@@ -33,11 +39,33 @@ "repository": {

"lodash": "^4.17.21",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react": ">=17.0.2",
"react-dom": ">=17.0.2"
},
"devDependencies": {
"@babel/preset-env": "^7.20.2",
"@babel/preset-typescript": "^7.21.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^11.2.7",
"@testing-library/react-hooks": "^8.0.1",
"@types/jest": "^29.5.0",
"@types/lodash": "^4.14.182",
"@types/node": "^18.6.4",
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"typescript": "^4.7.4"
"@types/node": "^18.15.11",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@typescript-eslint/eslint-plugin": "^5.57.0",
"eslint": "^8.37.0",
"eslint-config-prettier": "^8.8.0",
"eslint-config-standard-with-typescript": "^34.0.1",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jest": "^27.2.1",
"eslint-plugin-n": "^15.7.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-promise": "^6.1.1",
"jest": "^29.5.0",
"jest-environment-jsdom": "^29.5.0",
"jest-fetch-mock": "^3.0.3",
"prettier": "^2.8.7",
"react": ">=17.0.2",
"react-dom": ">=17.0.2",
"ts-jest": "^29.0.5",
"typescript": "^5.0.2"
},

@@ -49,3 +77,6 @@ "author": "MinHyeok Kang <rkdalsgur032@unist.ac.kr>",

},
"homepage": "https://github.com/devKangMinHyeok/use-upbit-api#readme"
"homepage": "https://github.com/devKangMinHyeok/use-upbit-api#readme",
"dependencies": {
"yocto-queue": "^1.0.0"
}
}

294

README.md

@@ -1,17 +0,19 @@

# use-upbit-api v1.1.5
# use-upbit-api
![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/devKangMinHyeok/use-upbit-api/ci.yml?style=plastic)
![Weekly Downloads](https://img.shields.io/npm/dw/use-upbit-api?style=plastic)
![version](https://img.shields.io/npm/v/use-upbit-api?style=plastic)
![types](https://img.shields.io/npm/types/use-upbit-api?style=plastic)
**The use-upbit-api custom hook for Upbit API** (Korea crypto exchange). In the previous, Upbit API's Websocket usage in React is difficult for developer who is unfamiliar with websocket in React, but this React Custom Hook solve the problem. Let's use this awesome custom hooks!
**_npm_** [here](https://www.npmjs.com/package/use-upbit-api)
[_npm_ &rarr;](https://www.npmjs.com/package/use-upbit-api)
**_Git Repository_** [here](https://github.com/devKangMinHyeok/use-upbit-api)
[_Git Repository_ &rarr;](https://github.com/devKangMinHyeok/use-upbit-api)
- **_Always opening_** to join this project for developing this library.
- **_Typescript_** is supported.
[_View Demo_ &rarr;](https://devkangminhyeok.github.io/React-Upbit-API-Example/total-example)
**_View Demo_** [here](https://devkangminhyeok.github.io/React-Upbit-API-Example/total-example)
![TOTALEXAMPLE](https://user-images.githubusercontent.com/44657722/183570075-cb54905c-a57c-44a6-96c3-3d66dccef054.gif)
**_View Demo Code_** is [here](https://github.com/devKangMinHyeok/React-Upbit-API-Example)
---

@@ -22,273 +24,61 @@ ## Install

## Format
---
### useFetchMarketCode
## Hooks
```jsx
const { isLoading, marketCodes } = useFetchMarketCode();
```
**REST API**
| Return | Description | Type | Format |
| ----------- | ----------------------------------- | ----------- | --------------------------------------------------------------------------------------- |
| isLoading | State of fetching market codes data | Boolean | `true : Loading`, <br> `false : Done` |
| marketCodes | All market codes of Upbit | ObjectArray | { <br>`market: string`,<br> `korean_name: string`, <br> `english_name: string`<br>} [ ] |
[useFetchMarketCode](#usefetchmarketcode)
### useUpbitWebSocket
**WEBSOCKET API**
```jsx
const { socket, isConnected, socketData } = useUpbitWebSocket(
targetMarketCodes,
type,
option
);
```
[useWsTicker](#usewsticker)
**Default Value**
[useWsOrderbook](#usewsorderbook)
```jsx
targetMarketCodes : [
{ market: "KRW-BTC", korean_name: "비트코인", english_name: "Bitcoin" },
]
type : "ticker"
option : { throttle_time: 400, max_length_queue: 100 }
```
[useWsTrade](#usewstrade)
| Argument | Description | Type | Format |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------ | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **targetMarketCodes** | Targeted market codes to Websocket API | ObjectArray | { `market: string`, `korean_name: string`, `english_name: string`} [ ] <br><br> - targetMarketCodes **should be strictly Object Array**, **not Object** . |
| **type** | Websocket Connection Type | String | `"ticker"` <br>`"orderbook"` <br> `"trade"` <br> <br>**- Strictly above one of the three types above** |
| **option** | throttle_time : period of updating socketData <br> max_length_queue : In "trade" type, max length of trade history queue | Object | { <br> `throttle_time: number`,<br> `max_length_queue: number` <br> } <br><br> **- Too Low throttle_time (less than 400ms) may cause unexpectable bug. <br><br> - Too Large max_length_queue can make too large memory use.** |
| Return | Description | Type | Format |
| --------------- | ------------------------------------------------------ | ---------------- | -------------------------------------------------- |
| **socket** | WebSocket object which is created by useUpbitWebSocket | WebSocket object | |
| **isConnected** | State of Websocket Connection | Boolean | - `true : Connected` <br> - `false : NonConnected` |
| **socketData** | recieved data from upbit websocket server | ObjectArray | |
## Usage
**_Git Example Code_** is [here](https://github.com/devKangMinHyeok/React-Upbit-API-Example)
### useFetchMarketCode
```jsx
import { useFetchMarketCode } from "use-upbit-api";
function App() {
const { isLoading, marketCodes } = useFetchMarketCode();
return (
<>
{!isLoading
? marketCodes.map((ele) => <div key={ele.market}>{ele.market}</div>)
: null}
</>
);
}
export default App;
```
---
### useUpbitWebSocket
## useFetchMarketCode
**ticker API**
useFetchMarketCode hook is used to fetch market codes from upbit api
```jsx
import { useFetchMarketCode } from "use-upbit-api";
import { useUpbitWebSocket } from "use-upbit-api";
function App() {
const option = { throttle_time: 400, max_length_queue: 100 };
const { isLoading, marketCodes: targetMarketCodes } = useFetchMarketCode();
const { socket, isConnected, socketData } = useUpbitWebSocket(
targetMarketCodes,
"ticker",
option
);
return (
<>
<table>
<thead>
<tr>
<th>코인</th>
<th>현재가</th>
<th>등락률</th>
</tr>
</thead>
<tbody>
{socketData
? socketData.map((data, index) => (
<tr key={`${data.code}_${index}`}>
<td>{data.code}</td>
<td>{data.trade_price}</td>
<td>{(data.signed_change_rate * 100).toFixed(2)}%</td>
</tr>
))
: null}
</tbody>
</table>
</>
);
}
export default App;
```tsx
const {isLoading, marketCodes} = useFetchMarketCode(
(options = {throttle_time: 400, debug: false}), // default option, can be modified.
);
```
**orderbook API**
## useWsTicker
```jsx
import { useState } from "react";
import { useUpbitWebSocket } from "use-upbit-api";
useWsTicker is a custom hook that connects to a WebSocket API and retrieves real-time ticker data for a given market code.
function App() {
const option = { throttle_time: 400, max_length_queue: 100 };
const [targetMarketCodes, setTargetMarketCodes] = useState([
{
market: "KRW-BTC",
korean_name: "비트코인",
english_name: "Bitcoin",
},
]);
const { socket, isConnected, socketData } = useUpbitWebSocket(
targetMarketCodes,
"orderbook",
option
);
return (
<>
{socketData ? (
<div>
<div>코인 : {socketData.code}</div>
<div>총 매도 물량 : {socketData.total_ask_size}</div>
<div>총 매수 물량 : {socketData.total_bid_size}</div>
<table>
<thead>
<tr>
<th>매도 물량</th>
<th>가격</th>
<th>매수 물량</th>
</tr>
</thead>
<tbody>
{[...socketData.orderbook_units].reverse().map((ele, index) => (
<tr key={`ask_${index}`}>
<th>{ele.ask_size}</th>
<th>{ele.ask_price}</th>
<th>-</th>
</tr>
))}
{[...socketData.orderbook_units].map((ele, index) => (
<tr key={`bid_${index}`}>
<th>-</th>
<th>{ele.bid_price}</th>
<th>{ele.bid_size}</th>
</tr>
))}
</tbody>
</table>
</div>
) : (
<div>Orderbook Loading...</div>
)}
</>
);
}
export default App;
```tsx
const {socket, isConnected, socketData} = useWsTicker(
targetMarketCode,
(options = {throttle_time: 400, debug: false}), // default option, can be modified.
);
```
**trade API**
## useWsOrderbook
```jsx
import { useState } from "react";
import { useUpbitWebSocket } from "use-upbit-api";
useWsOrderbook is a custom hook that connects to a WebSocket API and retrieves real-time order book data for a given market code.
function App() {
const option = { throttle_time: 400, max_length_queue: 100 };
const [targetMarketCodes, setTargetMarketCodes] = useState([
{
market: "KRW-BTC",
korean_name: "비트코인",
english_name: "Bitcoin",
},
]);
const { socket, isConnected, socketData } = useUpbitWebSocket(
targetMarketCodes,
"trade",
option
);
return (
<>
{socketData ? (
<table>
<thead>
<tr>
<th>코인</th>
<th>체결 ID</th>
<th>체결 시간</th>
<th>ASK/BID</th>
<th>체결 가격</th>
</tr>
</thead>
<tbody>
{[...socketData].reverse().map((ele, index) => (
<tr key={index}>
<th>{ele.code} </th>
<th>{ele.sequential_id} </th>
<th>
{ele.trade_date} {ele.trade_time}
</th>
<th>{ele.ask_bid} </th>
<th>{ele.prev_closing_price} </th>
</tr>
))}
</tbody>
</table>
) : (
<div>Loading...</div>
)}
</>
);
}
export default App;
```
## typescript Support(version >= 1.1.4)
**ticker API**
```tsx
import { TickerInterface, useUpbitWebSocket } from "use-upbit-api";
const { socket, isConnected, socketData }: TickerInterface = useUpbitWebSocket(
targetMarketCodes,
"ticker",
option
const {socket, isConnected, socketData} = useWsOrderbook(
targetMarketCode,
(options = {throttle_time: 400, debug: false}), // default option, can be modified.
);
```
**orderbook API**
## useWsTrade
```tsx
import { OrderbookInterface, useUpbitWebSocket } from "use-upbit-api";
useWsTrade is a custom hook that connects to a WebSocket API
and retrieves real-time trade data for a given market code.
const { socket, isConnected, socketData }: OrderbookInterface =
useUpbitWebSocket(targetMarketCodes, "orderbook", option);
```
**trade API**
```tsx
import { TradeInterface, useUpbitWebSocket } from "use-upbit-api";
const { socket, isConnected, socketData }: TradeInterface = useUpbitWebSocket(
targetMarketCodes,
"trade",
option
const {socket, isConnected, socketData} = useWsTrade(
targetMarketCode,
(options = {throttle_time: 400, max_length_queue: 100, debug: false}), // default option, can be modified.
);

@@ -295,0 +85,0 @@ ```

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc