This is a simple Currency Converter web application built with React. It allows you to convert currency values between different currencies using real-time exchange rates.
- Convert currency values from one currency to another.
- Select source and target currencies.
- Real-time exchange rate data fetched from a public API.
- Responsive design for various screen sizes.
- The main application component.
- Manages the state of input amounts and selected currencies.
- Fetches and displays exchange rate data using the
UseConverter
custom hook. - Renders two
InputBox
components for input and output.
- A reusable input box component.
- Handles input amount, currency selection, and conversion.
- Utilizes the
UseConverter
custom hook to fetch currency conversion data. - Conditionally disables the input based on the "disable" prop.
- Utilizes
memo
to optimize rendering.
- A custom hook to fetch currency conversion data.
- Uses the
useState
anduseEffect
hooks to manage state and perform data fetching. - Fetches exchange rate data from a public API based on the provided currency code.
-
Clone this repository to your local machine.
-
Install dependencies using
npm install
. -
Run the development server with
npm start
. -
Open the app in your browser at
http://localhost:3000
.
-
The app fetches real-time currency conversion data from a public API based on the selected source currency.
-
Users can enter an amount, select source and target currencies, and then click the "Convert" button to see the converted amount.
-
The
UseConverter
custom hook handles the API request and data management, making it reusable across the application.
- React: A JavaScript library for building user interfaces.
- React Hooks: Used for managing state and side effects.
- CSS: Styling and layout design.
- Currency Conversion API: Provides real-time currency exchange rate data.
- Background image: WallpaperSmug
- Your Name
This project is open source and available under the MIT License.
Feel free to customize this README file further to include your name, additional details, and any other information relevant to your project.