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.