{"id":31798321,"url":"https://github.com/datavysta/vysta-react","last_synced_at":"2026-01-20T17:36:33.864Z","repository":{"id":271047934,"uuid":"912264307","full_name":"datavysta/vysta-react","owner":"datavysta","description":"React components for Vysta - a backend as a service platform","archived":false,"fork":false,"pushed_at":"2025-09-26T22:54:29.000Z","size":1043,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-27T00:22:18.982Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/datavysta.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-01-05T04:15:57.000Z","updated_at":"2025-09-26T22:54:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"b319079e-3d61-4742-b5b0-02593965ece1","html_url":"https://github.com/datavysta/vysta-react","commit_stats":null,"previous_names":["datavysta/vysta-react"],"tags_count":63,"template":false,"template_full_name":null,"purl":"pkg:github/datavysta/vysta-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datavysta%2Fvysta-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datavysta%2Fvysta-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datavysta%2Fvysta-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datavysta%2Fvysta-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/datavysta","download_url":"https://codeload.github.com/datavysta/vysta-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datavysta%2Fvysta-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279005416,"owners_count":26083883,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-10T21:22:41.362Z","updated_at":"2026-01-20T17:36:33.858Z","avatar_url":"https://github.com/datavysta.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @datavysta/vysta-react\n\nReact components for Vysta - a backend as a service platform.\n\n## Installation\n\n```bash\nnpm install @datavysta/vysta-react @datavysta/vysta-client ag-grid-community ag-grid-react\n```\n\n## Basic Usage\n\nFirst, import the styles:\n\n```tsx\nimport '@datavysta/vysta-react/style.css';\n```\n\nThen use the components in your app:\n\n```tsx\nimport { DataGrid } from '@datavysta/vysta-react';\nimport { VystaClient, VystaService } from '@datavysta/vysta-client';\nimport { useMemo } from 'react';\n\n// Define your entity type\ninterface Product {\n  productId: number;\n  productName: string;\n  unitPrice: number;\n}\n\n// Create your service\nclass ProductService extends VystaService\u003cProduct\u003e {\n  constructor(client: VystaClient) {\n    super(client, 'Northwinds', 'Products', {\n      primaryKey: 'productId'\n    });\n  }\n}\n\n// In your React component\nfunction ProductList() {\n  const products = useMemo(() =\u003e {\n    const client = new VystaClient({ baseUrl: 'http://localhost:8080' });\n    return new ProductService(client);\n  }, []);\n\n  const columnDefs = [\n    { field: 'productId', headerName: 'ID' },\n    { field: 'productName', headerName: 'Name' },\n    { field: 'unitPrice', headerName: 'Price' }\n  ];\n\n  return (\n    \u003cDataGrid\u003cProduct\u003e\n      title=\"Products\"\n      noun=\"Product\"\n      repository={products}\n      columnDefs={columnDefs}\n      getRowId={(product) =\u003e product.productId.toString()}\n    /\u003e\n  );\n}\n\n## VystaServiceProvider (Core Service Context)\n\n`VystaServiceProvider` is a core feature that provides the VystaClient instance and core Vysta services (roles, permissions, user profile, and authentication) to your app via React context.\n\n**Usage Example:**\n\n```tsx\nimport { VystaServiceProvider, useVystaServices } from '@datavysta/vysta-react';\nimport { VystaConfig } from '@datavysta/vysta-client';\n\nconst config: VystaConfig = {\n  baseUrl: '/api',\n  debug: true,\n};\n\nfunction App() {\n  return (\n    \u003cVystaServiceProvider config={config} apps={[\"Northwinds\"]}\u003e\n      \u003cYourApp /\u003e\n    \u003c/VystaServiceProvider\u003e\n  );\n}\n\n// In any child component:\nfunction MyComponent() {\n  const {\n    roleService,\n    permissionService,\n    profile,\n    permissions,\n    canSelectConnection,\n    isAuthenticated,\n    profileLoading,\n    profileError,\n    loginLoading,\n    loginError,\n    auth,\n  } = useVystaServices();\n\n  // Example: login\n  const handleLogin = async () =\u003e {\n    await auth.login('user@example.com', 'password');\n  };\n\n  // Example: logout\n  const handleLogout = async () =\u003e {\n    await auth.logout();\n  };\n\n  // Example: get sign-in methods\n  const signInMethods = await auth.getSignInMethods();\n\n  // ...use any of the above context values as needed\n}\n```\n\n\u003e **Note:** `VystaServiceProvider` provides the following via context (using `useVystaServices`):\n\u003e - `roleService`: VystaRoleService instance\n\u003e - `permissionService`: VystaPermissionService instance\n\u003e - `profile`: The user's profile object (or null if not loaded)\n\u003e - `permissions`: A record mapping app/connection names to their permissions (or null if not loaded or not requested)\n\u003e - `canSelectConnection`: Helper to check if the user has SELECT permission for a given app\n\u003e - `isAuthenticated`: Boolean, true if a user profile is loaded\n\u003e - `profileLoading`: Boolean, true while profile/permissions are loading\n\u003e - `profileError`: Any error encountered during profile/permissions loading\n\u003e - `loginLoading`: Boolean, true while a login/logout is in progress\n\u003e - `loginError`: Any error encountered during login/logout\n\u003e - `auth`: An object with authentication methods:\n\u003e   - `login(username, password)`\n\u003e   - `logout()`\n\u003e   - `getSignInMethods()`\n\u003e   - `getAuthorizeUrl(providerId)`\n\u003e   - `exchangeToken(token)`\n\n\u003e Always use the context-based approach for authentication, user, and permissions state. Direct use of internal hooks is not supported in the public API.\n\n## Authentication and User Profile (Context-based Access)\n\nAuthentication, user profile, and permissions are now accessed exclusively via the `VystaServiceProvider` and the `useVystaServices` context hook. This ensures a single source of truth for authentication and user state throughout your app.\n\n- `profile`: The user's profile object (or null if not loaded).\n- `permissions`: A record mapping app/connection names to their permissions (or null if not loaded or not requested).\n- `canSelectConnection`: Helper to check if the user has SELECT permission for a given app.\n- `profileLoading`: Boolean, true while profile/permissions are loading.\n- `profileError`: Any error encountered during profile/permissions loading.\n- `loginLoading`: Boolean, true while a login/logout is in progress.\n- `loginError`: Any error encountered during login/logout.\n- `isAuthenticated`: Boolean, true if a user profile is loaded.\n- `auth`: An object with authentication methods:\n  - `login(username, password)`\n  - `logout()`\n  - `getSignInMethods()`\n  - `getAuthorizeUrl(providerId)`\n  - `exchangeToken(token)`\n- `roleService`: VystaRoleService instance for role management.\n- `permissionService`: VystaPermissionService instance for permission management.\n\n\u003e **Note:** Direct use of internal hooks is not supported in the public API. Always use the context-based approach for authentication and user state.\n\n## FilterPanel Component\n\nThe FilterPanel component provides a powerful and flexible filtering interface for your data.\n\n### Basic Usage\n\n```tsx\nimport { FilterPanel } from '@datavysta/vysta-react';\nimport DataType from '@datavysta/vysta-react/components/Models/DataType';\nimport { FilterDefinitionsByField } from '@datavysta/vysta-react/components/Filter/FilterDefinitionsByField';\n\nconst filterDefinitions: FilterDefinitionsByField = [\n    {\n        targetFieldName: \"productName\",\n        label: \"Product Name\",\n        dataType: DataType.String\n    },\n    {\n        targetFieldName: \"unitPrice\",\n        label: \"Unit Price\",\n        dataType: DataType.Numeric\n    },\n    {\n        targetFieldName: \"unitsInStock\",\n        label: \"Units In Stock\",\n        dataType: DataType.Numeric\n    },\n    {\n        targetFieldName: \"discontinued\",\n        label: \"Discontinued\",\n        dataType: DataType.Boolean\n    }\n];\n\nfunction App() {\n    const [conditions, setConditions] = useState\u003cCondition[]\u003e([]);\n\n    return (\n        \u003cFilterPanel \n            conditions={conditions}\n            onApply={setConditions}\n            filterDefinitions={filterDefinitions}\n        /\u003e\n    );\n}\n```\n\n### FilterPanel Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `filterDefinitions` | `FilterDefinitionsByField` | Array of field definitions with types and labels |\n| `conditions` | `Condition[]` | Current filter conditions |\n| `onApply` | `(conditions: Condition[]) =\u003e void` | Callback when filters are applied |\n| `onChange` | `(conditions: Condition[]) =\u003e void` | Callback when conditions change |\n\n### Filter Types\n\nThe FilterPanel supports these data types from `DataType`:\n- `String`: Text fields with operations like contains, equals, starts with\n- `Numeric`: Numeric fields with operations like equals, greater than, less than\n- `Boolean`: True/false fields\n- `Date`: Date fields with operations like equals, before, after\n\n### Filter Definition Format\n\nEach filter definition should include:\n- `targetFieldName`: The field name to filter on\n- `label`: Display label for the field\n- `dataType`: One of the DataType enum values\n\n### Copy/Paste Multiple Values\n\nFilterPanel supports pasting multiple values into a filter value field. When you paste multiple lines (newline-separated values) into a filter value input:\n\n- The single condition is automatically converted into a group condition\n- Each pasted value becomes a separate expression condition\n- All conditions are connected with OR operators\n- The original condition's ID and operator are preserved to maintain proper tree structure\n\n**Example:**\n1. Select a column (e.g., \"Product Name\")\n2. Select a comparison operator (e.g., \"Equal\")\n3. Paste multiple values into the value field:\n   ```\n   Product A\n   Product B\n   Product C\n   ```\n4. The filter automatically converts to: `(Product Name = \"Product A\" OR Product Name = \"Product B\" OR Product Name = \"Product C\")`\n\n**Notes:**\n- Copy/paste only works when both column name and comparison operator are set\n- Copy/paste is disabled for BETWEEN and NOT BETWEEN operators (they require exactly two values)\n- Single value pastes work normally without conversion\n\n## Vysta Mantine Integration\n\nVysta components can optionally use Mantine UI for enhanced styling and interactions. To use Vysta's Mantine integration:\n\n1. Install Mantine dependencies:\n```bash\nnpm install @mantine/core @mantine/hooks\n```\n\n2. Import Mantine styles:\n```tsx\nimport '@mantine/core/styles.css';\n```\n\n3. Wrap your Vysta components with both providers:\n```tsx\nimport { MantineProvider } from '@mantine/core';\nimport { VystaMantineComponentProvider } from '@datavysta/vysta-react/mantine';\n\nfunction App() {\n  return (\n    \u003cMantineProvider\u003e\n      \u003cVystaMantineComponentProvider\u003e\n        {/* Your Vysta components here */}\n      \u003c/VystaMantineComponentProvider\u003e\n    \u003c/MantineProvider\u003e\n  );\n}\n```\n\nThis will enable Mantine-styled versions of Vysta components while maintaining all their core functionality.\n\n## Props Documentation\n\n### Required Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `title` | `string` | The title displayed at the top of the grid |\n| `noun` | `string` | The singular noun for your entity (used in button labels) |\n| `repository` | `IDataService\u003cT\u003e` | The Vysta service instance for your entity |\n| `columnDefs` | `ColDef\u003cT\u003e[]` | AG Grid column definitions |\n| `getRowId` | `(data: T) =\u003e string` | Function to get a unique string ID from your entity |\n\n### Optional Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `gridOptions` | `GridOptions\u003cT\u003e` | `undefined` | Additional AG Grid options |\n| `supportRegularDownload` | `boolean` | `false` | Enable CSV download of grid data with current sorting and filtering |\n| `supportInsert` | `boolean` | `false` | Show \"New\" button |\n| `supportDelete` | `boolean` | `false` | Show delete button in each row |\n| `deleteButton` | `(onDelete: () =\u003e void) =\u003e React.ReactNode` | `undefined` | Custom delete button renderer |\n| `filters` | `{ [K in keyof T]?: any }` | `undefined` | Vysta filters to apply. Should be memoized to prevent unnecessary reloads |\n| `wildcardSearch` | `string` | `undefined` | Text to use for wildcard search across fields (passed as `q` parameter) |\n| `inputProperties` | `{ [key: string]: any }` | `undefined` | Additional properties to pass to data source. Should be memoized to prevent unnecessary reloads |\n| `toolbarItems` | `React.ReactNode` | `undefined` | Custom toolbar items |\n| `onDataFirstLoaded` | `(gridApi: GridApi\u003cT\u003e) =\u003e void` | `undefined` | Callback when data first loads or when filters/inputProperties change |\n| `onDataLoaded` | `(gridApi: GridApi\u003cT\u003e, data: T[]) =\u003e void` | `undefined` | Callback when any data loads, including incremental loads |\n| `getRowClass` | `(params: RowClassParams\u003cT\u003e) =\u003e string \\| string[] \\| undefined` | `undefined` | Custom row CSS classes |\n| `tick` | `number` | `0` | Trigger grid refresh when incremented |\n| `theme` | `Theme \\| 'legacy'` | `undefined` | AG Grid theme configuration |\n| `styles` | `DataGridStyles` | `{}` | Custom styles for grid elements |\n| `noRowsComponent` | `React.ComponentType\u003cany\u003e` | `undefined` | Custom component to display when no rows are found |\n| `loadingComponent` | `React.ComponentType\u003cany\u003e` | `undefined` | Custom component to display during loading |\n\n### Styling\n\nYou can customize the appearance of individual grid elements using the `styles` prop:\n\n```tsx\n\u003cDataGrid\u003cProduct\u003e\n  // ... other props ...\n  styles={{\n    container: { backgroundColor: '#f5f5f5' },\n    title: { color: 'blue', fontSize: '1.2rem' },\n    badge: { backgroundColor: 'red', color: 'white' },\n    createButton: { backgroundColor: 'green' },\n    // ... other style overrides\n  }}\n/\u003e\n```\n\nAvailable style targets:\n- `container`: The main grid container\n- `toolbar`: The top toolbar section\n- `titleSection`: The title and badge container\n- `title`: The grid title text\n- `badge`: The count badge\n- `actions`: The actions container (buttons)\n- `createButton`: The \"New\" button\n- `downloadButton`: The download button\n- `deleteButton`: The delete button in rows\n- `grid`: The AG Grid container\n\n### Features\n\n- 🔄 Infinite scrolling with server-side operations\n- 📊 Sorting and filtering\n- ✨ Customizable columns\n- 🎨 Modern UI with great UX\n- 💪 Fully typed with TypeScript\n\n### Grid Customization\n\nThe grid uses AG Grid Community Edition under the hood. You can customize the grid behavior using the `gridOptions` prop:\n\n```tsx\n\u003cDataGrid\u003cProduct\u003e\n  // ... required props ...\n  gridOptions={{\n    rowHeight: 48,\n    headerHeight: 40,\n    rowSelection: 'multiple',\n    // ... any other AG Grid options\n  }}\n/\u003e\n```\n\n### Filtering Example\n\n```tsx\n// Example with memoized filters to prevent unnecessary reloads\nfunction ProductList() {\n  const [useFilter, setUseFilter] = useState(false);\n  \n  const filters = useMemo(\n    () =\u003e useFilter ? { unitPrice: { gt: 20 } } : undefined,\n    [useFilter]\n  );\n\n  return (\n    \u003cDataGrid\u003cProduct\u003e\n      // ... other props ...\n      filters={filters}\n    /\u003e\n  );\n}\n```\n\n### Input Properties Example\n\n```tsx\n// Example with memoized input properties\nfunction ProductList() {\n  const [useInputProps, setUseInputProps] = useState(false);\n  \n  const inputProperties = useMemo(\n    () =\u003e useInputProps ? { customParam: 'value' } : undefined,\n    [useInputProps]\n  );\n\n  return (\n    \u003cDataGrid\u003cProduct\u003e\n      // ... other props ...\n      inputProperties={inputProperties}\n    /\u003e\n  );\n}\n```\n\n### Aggregate Summary Row (Footer)\n\nDataGrid supports showing a summary/footer row with aggregate values (SUM, AVG, etc) using the Vysta aggregate query API. This is useful for totals, averages, and other summary statistics.\n\n#### Usage Example\n\n```tsx\nimport { DataGrid } from '@datavysta/vysta-react';\nimport { Aggregate, SelectColumn } from '@datavysta/vysta-client';\n\nconst aggregateSelect: SelectColumn\u003cProduct\u003e[] = [\n  { name: 'unitPrice', aggregate: Aggregate.AVG, alias: 'avgUnitPrice' },\n  { name: 'unitsInStock', aggregate: Aggregate.SUM, alias: 'totalUnitsInStock' },\n];\n\n\u003cDataGrid\u003cProduct\u003e\n  title=\"Products\"\n  noun=\"Product\"\n  repository={productService}\n  columnDefs={columnDefs}\n  getRowId={(product) =\u003e product.productId.toString()}\n  aggregateSelect={aggregateSelect}\n/\u003e\n```\n\n- The summary row appears below the grid and updates with filters, search, etc.\n- By default, the row matches columns by field name or alias. You can customize rendering with the `renderAggregateFooter` prop.\n- The summary row is not part of the grid (not a pinned row), so it is always visible below the grid.\n\n#### Details \u0026 Customization\n\n- **Column value formatting**: The footer automatically applies the column's `valueFormatter` (if provided in your `columnDefs`). This lets you format numbers, currency, dates, etc., exactly the same way as in the grid cells.\n- **Alias required**: Every `SelectColumn` in `aggregateSelect` must have an `alias`. The alias is used to look up the aggregate value in the server response.\n- **Column matching**: The footer places the aggregate under the column whose `field` equals the `name` in the `SelectColumn`. The `alias` can be anything you like.\n- **Fully custom footer**: Provide a `renderAggregateFooter` prop to supply your own React node. You receive the raw `summary` object (keyed by alias) and can render any layout, charts, or styled components you need.\n\n#### Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `aggregateSelect` | `SelectColumn\u003cT\u003e[]` | Columns/aggregates to fetch and show in the summary row |\n| `renderAggregateFooter` | `(summary: Record\u003cstring, any\u003e) =\u003e React.ReactNode` | Optional custom render for the summary row |\n| `styles.aggregateFooter` | `React.CSSProperties` | Custom style for the summary/footer row |\n| `styles.aggregateValue` | `React.CSSProperties` | Style override for the `\u003cspan\u003e` that holds each formatted value |\n\nSee the [@datavysta/vysta-client](https://www.npmjs.com/package/@datavysta/vysta-client) docs for more on `Aggregate` and `SelectColumn`.\n\n## LazyLoadList Component\n\nThe LazyLoadList component provides a searchable, lazy-loading dropdown list that efficiently loads data from a Vysta service.\n\n### Basic Usage\n\n```tsx\nimport { LazyLoadList } from '@datavysta/vysta-react';\n\nfunction ProductSelector() {\n    const [selectedId, setSelectedId] = useState\u003cstring | null\u003e(null);\n    const productService = useMemo(() =\u003e new ProductService(client), [client]);\n\n    return (\n        \u003cLazyLoadList\u003cProduct\u003e\n            repository={productService}\n            value={selectedId}\n            onChange={setSelectedId}\n            label=\"Select Product\"\n            displayColumn=\"productName\"\n            clearable\n        /\u003e\n    );\n}\n```\n\n### LazyLoadList Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `repository` | `IReadonlyDataService\u003cT\u003e` | The Vysta service to fetch data from |\n| `value` | `string \\| null` | The currently selected value |\n| `onChange` | `(value: string \\| null) =\u003e void` | Callback when selection changes |\n| `displayColumn` | `keyof T` | The field to display in the list |\n| `label` | `string` | Optional label for the list |\n| `filters` | `{ [K in keyof T]?: any }` | Optional filters to apply |\n| `groupBy` | `keyof T` | Optional field to group items by |\n| `pageSize` | `number` | Number of items to load per page (default: 20) |\n| `searchable` | `boolean` | Whether to show search input (default: true) |\n| `clearable` | `boolean` | Whether to show clear button (default: true) |\n| `disableInitialValueLoad` | `boolean` | Disable initial value query when display matches key (default: false) |\n\n### Features\n\n- 🔄 Lazy loading with infinite scroll\n- 🔍 Built-in search functionality\n- 📑 Optional grouping of items\n- 🎯 Efficient loading of selected values\n- 🎨 Customizable styles\n- 💪 Full TypeScript support\n\n### Example with Filtering\n\n```tsx\nfunction OrderSelector() {\n    const [selectedOrderId, setSelectedOrderId] = useState\u003cstring | null\u003e(null);\n    const [customerId, setCustomerId] = useState\u003cstring | null\u003e(null);\n    \n    return (\n        \u003cLazyLoadList\u003cOrder\u003e\n            repository={orderService}\n            value={selectedOrderId}\n            onChange={setSelectedOrderId}\n            label=\"Select Order\"\n            displayColumn=\"orderId\"\n            clearable={true}\n            filters={customerId ? { customerId: { eq: customerId } } : undefined}\n        /\u003e\n    );\n}\n```\n\n## FileUpload Component\n\nA file upload component that integrates with Vysta's file service and uses Uppy for the upload interface.\n\n```typescript\nimport { FileUpload } from '@datavysta/vysta-react';\n\nfunction MyComponent() {\n    return (\n        \u003cFileUpload\n            fileService={fileService}\n            allowedFileTypes={['.jpg', '.png', 'image/*']}\n            filename=\"custom-name.jpg\"\n            autoProceed={true}\n            onUploadSuccess={(fileId, fileName) =\u003e {\n                console.log(`File uploaded: ${fileName} with ID: ${fileId}`);\n            }}\n        /\u003e\n    );\n}\n```\n\n#### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `fileService` | `VystaFileService` | Required | The Vysta file service instance to handle uploads |\n| `onUploadSuccess` | `(fileId: string, fileName: string) =\u003e void` | - | Callback when file upload completes successfully |\n| `filename` | `string` | - | Optional custom filename to use instead of the uploaded file's name |\n| `allowedFileTypes` | `string[]` | - | Optional array of allowed file types (e.g., ['.jpg', 'image/*']) |\n| `autoProceed` | `boolean` | `false` | Whether to start upload automatically when files are selected |\n\nThe component provides:\n- Drag and drop interface\n- File type restrictions\n- Upload progress bar\n- Automatic or manual upload triggering\n- Integration with Vysta's file service\n\n## License\n\nMIT ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatavysta%2Fvysta-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatavysta%2Fvysta-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatavysta%2Fvysta-react/lists"}