Temperature Converter React Component

A React component for converting temperatures between Celsius and Fahrenheit.

Table of Contents

• Introduction
• Installation
• Usage
• Components
• Features
• Props
• Example Usage
• Scripts
• Dependencies
• DevDependencies
• Conclusion

Introduction

This package provides a TemperatureConverter React component and a custom hook useTemperatureConverter for handling temperature conversions.

Installation

You can install the package via npm:

npm install @mahesh005/temp_conversion

Usage

Import the TemperatureConverter component and use it in your React application:

Temperature Converter with UI

import React from 'react';
import TemperatureConverter from '@mahesh005/temp_conversion';
const App = () => {
return (
<div>
<TemperatureConverter initialCelsius={25} size={2} showRange={true} />
</div>
);
};
export default App;

Hooks

useTemperatureConverter: Custom hook for managing temperature state and conversion logic.

Parameters

initialCelsius (number): Initial temperature in Celsius (default: 0).

Returns

celsius (number): Current temperature in Celsius. fahrenheit (number): Current temperature in Fahrenheit. setCelsius (function): Function to set the temperature in Celsius. setFahrenheit (function): Function to set the temperature in Fahrenheit.

Example

import React, { useState } from 'react';
import { useTemperatureConverter } from '@mahesh005/temp_conversion';
const CustomComponent = () => {
const { celsius, fahrenheit, setCelsius, setFahrenheit } = useTemperatureConverter(0);
console.log("Celsius :" + celsius,"Fahrenheit: " + fahrenheit)
return (
<div>
<div>
<label>
Celsius:
<input
type="number"
value={celsius}
onChange={(e) => setCelsius(parseFloat(e.target.value))}
/>
</label>
</div>
<div>
<label>
Fahrenheit:
<input
type="number"
value={fahrenheit}
onChange={(e) => setFahrenheit(parseFloat(e.target.value))}
/>
</label>
</div>
</div>
);
};
export default CustomComponent;

Components

TemperatureConverter: React component for temperature conversion UI. useTemperatureConverter: Custom hook for managing temperature state and conversion logic.

Features

Converts temperatures between Celsius and Fahrenheit. Adjustable size and optional temperature range display.

Props

initialCelsius: Initial temperature in Celsius (default: 0). size: Size multiplier for adjusting visual components (default: 1). showRange: Boolean to show/hide temperature range inputs (default: true).

Example Usage

<TemperatureConverter initialCelsius={0} size={1.5} showRange={false} />

Scripts

start: Starts the development server. build: Builds the production-ready bundle. test: Runs tests. lint: Lints the codebase.

Dependencies

React React DOM

DevDependencies

Babel ESLint Jest

Conclusion

This package provides an easy-to-use component for temperature conversion in React applications. It includes adjustable visual components and straightforward temperature input controls.