react-fixer

react-fixer is a lightweight and customizable React component that allows you to easily fetch historical currency exchange rates using the Fixer API and convert the JSON response to the well responsive Chart UI.

Features

• Fetches historical exchange rates for multiple symbols.
• Customizable through props like API key, symbols, start date, and end date.
• Displays data in a chart format for easy comparison.
• Users can specify custom colors for each currency symbol in the chart.
• Users can pass the chartType prop to specify what kind of a chart they need. For example, line, bar, radar, etc.
• Fully customizable and easy to integrate.

Installation

To install the package, simply run:

npm install react-fixer

If you are using Yarn:

yarn add react-fixer

Usage

Here's a basic example of how to use the react-fixer component in your React project:

import React from "react";
import { HistoricalChart } from "react-fixer";

const App = () => {
    return (
        <div>
            <h1>Currency Exchange Rates</h1>
            <HistoricalChart
                apiKey="YOUR_API_KEY"
                symbols="USD,CAD,EUR"
                startDate="2023-01-01"
                endDate="2023-12-31"
                chartType="line"
                colors={{
                    USD: "#FF0000",
                    CAD: "#0000FF",
                    EUR: "#00FF00",
                }}
            />
        </div>
    );
};

export default App;

Expected Output

Props

The HistoricalChart component accepts the following props:

| Prop | Type | Description | Required | | ----------- | -------- | --------------------------------------------------------------------------------------------- | -------- | | apiKey | string | Get your API key from Fixer.io. | Yes | | symbols | string | An array of currency symbols (e.g., "USD, EUR"). | Yes | | startDate | string | The start date for fetching historical rates in YYYY-MM-DD format. | Yes | | endDate | string | The end date for fetching historical rates in YYYY-MM-DD format. | Yes | | chartType | string | Specify what kind of a chart you want. For example, line, bar, radar, etc. | Yes | | colors | object | An optional object where keys are currency symbols and values are their corresponding colors. | No |

Contributing

We are soon opening up the public contribution on react-fixer package. Meanwhile, if you have any suggestions of feedback, feel free to reach me out [email protected]

Notes

You may expect some bugs and issues as react-fixer is still in the brainstorming and building phase. We are constantly working on improving the developer workflow by providing these micro-solutions. Please bear with us. Thank you so much for your support!