Udpated Version

Author: nitesh-syngenta

README.md

@@ -1,15 +1,96 @@
-# React + TypeScript + Vite
+# React Mapbox Field Renderer
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A modern React component library built with TypeScript and Vite.
 
-Currently, two official plugins are available:
+## Features
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- Built with Mapbox, React 20+ and TypeScript
+- Powered by Vite for lightning-fast development
+- Hot Module Replacement (HMR) for seamless development experience
+- ESLint configuration with TypeScript support
+- Minimal setup with maximum flexibility
+
+## Installation
+
+```bash
+npm i @syngenta/mapbox-field-renderer
+```
+
+## Usage
+
+```tsx
+import React, { useEffect, useRef, useState } from "react";
+import mapboxgl from "mapbox-gl";
+import {
+  initializeMap,
+  addTrialPlotsToMap,
+  zoomToSourceId,
+  updateMapWithSelectedProperty,
+  addBufferZoneToMap,
+  addMarkerAtPoint,
+  addGeoJsonSource,
+  addLineLayer,
+  zoomToGeoJson,
+  parallelLinesLayerfromPoint,
+} from "@syngenta/mapbox-field-renderer";
+
+ 
+
+function App() {
+  const mapContainer = useRef<HTMLDivElement | null>(null);
+  const map = useRef<mapboxgl.Map | null>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+
+   useEffect(() => {
+    if (map.current) return; // Initialize map only once
+    const center = getMapCenter(field);
+    if (mapContainer.current && field.geometry) {
+      initializeMap(map, mapContainer, center, field.geometry, {
+        token: process.env.NEXT_PUBLIC_MAPBOX_TOKEN!,
+        preserveDrawingBuffer: mode === "pdf",
+        zoom: 13,
+        navigationControl: {
+          showZoom: false,
+        },
+      });
+    }
+  }, [field, selectedField, data, mode]);
+
+
+  return (
+         <div>
+              <div
+                ref={mapContainer}
+                className="w-full h-[60vh] md:h-[80vh] rounded-md "
+              />
+         </div>
+  );
+}
+```
+
+## Development
 
-## Expanding the ESLint configuration
+### Prerequisites
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+- Node.js 18+
+- npm or yarn
+
+## Build
+
+```bash
+npm run build
+```
+
+## Technology Stack
+
+- **React**: UI library
+- **TypeScript**: Type safety
+- **Vite**: Build tool and development server
+- **ESLint**: Code quality and consistency
+
+## ESLint Configuration
+
+This project includes a robust ESLint setup. For production applications, we recommend enabling type-aware lint rules:
 
 ```js
 export default tseslint.config({
@@ -22,7 +103,6 @@ export default tseslint.config({
     ...tseslint.configs.stylisticTypeChecked,
   ],
   languageOptions: {
-    // other options...
     parserOptions: {
       project: ['./tsconfig.node.json', './tsconfig.app.json'],
       tsconfigRootDir: import.meta.dirname,
@@ -31,7 +111,7 @@ export default tseslint.config({
 })
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+For React-specific lint rules, you can install and configure these plugins:
 
 ```js
 // eslint.config.js
@@ -40,15 +120,25 @@ import reactDom from 'eslint-plugin-react-dom'
 
 export default tseslint.config({
   plugins: {
-    // Add the react-x and react-dom plugins
     'react-x': reactX,
     'react-dom': reactDom,
   },
   rules: {
-    // other rules...
-    // Enable its recommended typescript rules
     ...reactX.configs['recommended-typescript'].rules,
     ...reactDom.configs.recommended.rules,
   },
 })
 ```
+
+## Available Vite Plugins
+
+Two official plugins are available:
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## License
+Check LICENSE File(MIT License)
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.