react.md

MetaApi Integration with React

You can look at a demo of these examples here.

Table of contents

1. Prerequisites
2. Installation
3. Using
4. Examples
5. Troubleshooting

Prerequisites

• Node.js 10.x.x or later installed
• NPM 6.x or later installed
• A valid MetaApi API token (you can get one by signing up for a MetaApi account)
• A MetaTrader account connected to MetaApi

Installation

Install MetaApi with npm:

npm install --save metaapi.cloud-sdk

Using

You can apply MetaApi to your React application in two ways:

• Functional component;
• Class component.

Using in Functional Component

import React, { useState, useEffect } from 'react';
// import library in your component file
import MetaApi, { RpcMetaApiConnectionInstance } from 'metaapi.cloud-sdk1';

const accountId = 'your-metatrader-account-id';
const token = 'your-metaapi-token';

const MyComponent = () => {
  const [data, setData] = useState(null);

  const connectToMetaApi = async (): Promise<RpcMetaApiConnectionInstance> => {
    // Get instance of MetaApi with your MetaApi token
    const metaApi = new MetaApi(token);
    // Get MetaTrader account
    const account = await metaApi.metatraderAccountApi.getAccount(accountId);

    // Get connection instance
    await account.waitConnected();
    const connection = account.getRPCConnection();

    // Wait until connection is established
    await connection.connect();
    await connection.waitSynchronized();

    return connection;
  }

  const fetchData = async () => {
    const connection = await connectToMetaApi();

    // For example, get account information
    const accountInformation = await connection.getAccountInformation();
    console.log(accountInformation);
    setData(accountInformation);
  }

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      {!data && <p>Loading...</p>}
      {data && <p>{JSON.stringify(data)}</p>}
    </div>
  );
};

export default MyComponent;

Using in Class Component

import React, { Component } from 'react';
// import library in your component file
import MetaApi from 'metaapi.cloud-sdk';

interface IMyComponentProps {}
interface IMyComponentState {
  data: any;
}

class MyComponent extends Component<IMyComponentProps, IMyComponentState> {
  state: IMyComponentState = { data: null }; 

  accountId: string = 'your-metatrader-account-id';
  token: string = 'your-metaapi-token';

  async componentDidMount(): Promise<void> {
    const connection = await this.connectToMetaTraderApiRPC();

    // For example, get account information
    const accountInformation = await connection.getAccountInformation();
    console.log(accountInformation);
    this.setState({ data: accountInformation });
  }

  async connectToMetaTraderApiRPC(): Promise<RpcMetaApiConnectionInstance> {
    // Get instance of MetaApi with your MetaApi token
    const metaApi = new MetaApi(this.token);
    // Get MetaTrader account
    const account = await metaApi.metatraderAccountApi.getAccount(this.accountId);

    // Get connection instance
    await account.waitConnected();
    const connection = account.getRPCConnection();

    // Wait until connection is established
    await connection.connect();
    await connection.waitSynchronized();

    return connection;
  }

  render() {
    const { data } = this.state;

    return (
      <div>
        {!data && <p>Loading...</p>}
        {data && <p>{JSON.stringify(data)}</p>}
      </div>
    );
  }
}

export default MyComponent;

Examples

Integration examples are located in the examples/react/app/ directory.

• Historical Market Data: src/components/historical/
• RiskManagement: src/components/riskManagement/
• Stream Quotes: src/components/streamQuotes
• CopyFactory: src/components/copyfactory/
• MetaStats: src/components/metastats/
• MetaApi: src/components/metaapi/

Prerequisites of examples

• Node.js 14.18+, 16+ or later installed (for Vite)
• NPM 6.14+ or later installed

Installation and Running

Download the MetaApi SDK from GitHub using the following command:

git clone https://github.com/metaapi/metaapi-javascript-sdk.git
cd metaapi-node.js-sdk/examples/react/app/

Runnig manually

npm install
npm run dev
# runned at localhost:5173

Start via docker

Use docker:

docker build -t metaapi-app-example -f Dockerfile .
docker run -d -p 5173:5173 metaapi-app-example
# runned at localhost:5173

Or use docker-compose:

docker-compose up
# runned at localhost:5173

Troubleshooting

If you encounter any issues while running the examples or integrating MetaApi with your React application, please, contact the MetaApi support team via online chat.