react-resource-ui 0.1.0 → 0.1.1

package/README.md

@@ -1,73 +1,110 @@
-# React + TypeScript + Vite
+# React Resource UI
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A data orchestration layer for React focused on pagination and list-based UI patterns.
 
-Currently, two official plugins are available:
+npm: https://www.npmjs.com/package/react-resource-ui
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+---
 
-## React Compiler
+## Overview
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+React Resource UI provides a unified abstraction for handling data fetching, pagination, and virtualization in React applications.
 
-## Expanding the ESLint configuration
+It simplifies common UI patterns such as tables and lists by removing the need to rewrite logic when switching between pagination strategies.
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+---
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+## Installation
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+npm install react-resource-ui
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
+---
+
+## Basic Usage
+
+import { useResource } from "react-resource-ui";
+
+function App() {
+  const { data, loading, error, page, setPage } = useResource({
+    source: async ({ page = 1, pageSize = 10 }) => {
+      const skip = (page - 1) * pageSize;
+      const res = await fetch(
+        `https://dummyjson.com/todos?limit=${pageSize}&skip=${skip}`
+      );
+      const json = await res.json();
+      return json.todos;
+    },
+
+    pagination: {
+      type: "page",
+      pageSize: 20,
     },
-  },
-])
-```
-
-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:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
+
+    virtualization: {
+      enabled: true,
+      itemHeight: 40,
+      containerHeight: 400,
     },
-  },
-])
-```
+  });
+
+  return null;
+}
+
+---
+
+## Pagination Modes
+
+The same logic can be reused across different pagination strategies by updating configuration only.
+
+Page-based:
+pagination: { type: "page" }
+
+Load more:
+pagination: { type: "loadmore" }
+
+Infinite scroll:
+pagination: { type: "infinite" }
+
+---
+
+## Features
+
+- Unified API for multiple pagination strategies
+- Built-in virtualization support
+- Works with async functions, URLs, or static data sources
+- Request deduplication using request tracking
+- Lightweight page-based caching
+- Designed for table and list UIs
+
+---
+
+## Design Goals
+
+- Reduce UI-specific data handling complexity
+- Avoid rewriting logic when changing pagination behavior
+- Provide a higher-level abstraction over common data-fetching patterns
+- Keep configuration simple and predictable
+
+---
+
+## Status
+
+Version: 0.1.0
+
+This is an early release focused on core functionality.
+Additional testing and edge case handling are in progress.
+
+---
+
+## Roadmap
+
+- Sorting and filtering support
+- Form integration
+- Improved caching strategies
+- Developer tooling and debug utilities
+
+---
+
+## Author
+
+Kalyan Mantha

package/package.json

@@ -1,27 +1,26 @@
 {
   "name": "react-resource-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A high-level data orchestration hook for React with pagination, caching, and virtualization",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "license": "MIT",
-
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts"
   },
-
   "peerDependencies": {
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
-
   "devDependencies": {
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "tsup": "^8.5.1",
     "typescript": "~5.9.3"
   }
-}
+}