netzila-react-timezone

A React component for selecting time zones.

Description

netzila-react-timezone is a simple and customizable React component that allows users to select time zones in their web applications. It provides an easy-to-use interface for users to pick from a list of predefined time zones.

Installation

Install the package using npm:

npm install netzila-react-timezone

Usage

Import the NetzilaTimeZone component in your React application and use it within your components.

import React, { useState } from 'react';
import { NetzilaTimeZone } from 'netzila-react-timezone';

const YourComponent = () => {
  const [selectedTimeZone, setSelectedTimeZone] = useState('Africa/Abidjan');

  const handleTimeZoneChange = (timeZone) => {
    setSelectedTimeZone(timeZone);
  };

  return (
    <div>
      <h1>Your React App</h1>
      <NetzilaTimeZone
        onTimeZoneChange={handleTimeZoneChange}
        style={{
          backgroundColor: '#f5f6f6',
          fontSize: '16px',
          borderRadius: '3px',
          color: 'rgb(108 103 103)',
          height: '26px',
        }}
        defaultValue={selectedTimeZone}
      />
      <p>Selected Time Zone: {selectedTimeZone}</p>
    </div>
  );
};

export default YourComponent;

Props

• onTimeZoneChange (function): A callback function triggered when the selected time zone changes.

• style (object): An object containing CSS styles for customizing the appearance of the component.

• defaultValue (string): The default value for the time zone select box.

• parentClassName : Optional. Class name for the outer div container.

• className: Optional. Class name for the select element.

Example

<NetzilaTimeZone
  onTimeZoneChange={handleTimeZoneChange}
  style={{
    backgroundColor: '#f5f6f6',
    fontSize: '16px',
    borderRadius: '3px',
    color: 'rgb(108 103 103)',
    height: '26px',
  }}
  defaultValue={timeZoneValue}
  parentClassName="custom-parent-class"
  className="custom-select-class"
/>