@dev-fastn-ai/react-core 2.4.0 → 2.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -48
- package/dist/core/use-field-options.d.ts +1 -1
- package/dist/index.d.ts +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -603,7 +603,7 @@ For fields of type `select` or `multi-select`, use the `useFieldOptions` hook to
|
|
|
603
603
|
```tsx
|
|
604
604
|
import { useFieldOptions } from "@fastn-ai/react-core";
|
|
605
605
|
|
|
606
|
-
function SelectField({ field, value, onChange, isMulti = false
|
|
606
|
+
function SelectField({ field, value, onChange, isMulti = false }) {
|
|
607
607
|
const {
|
|
608
608
|
options,
|
|
609
609
|
loading,
|
|
@@ -613,7 +613,7 @@ function SelectField({ field, value, onChange, isMulti = false, context }) {
|
|
|
613
613
|
error,
|
|
614
614
|
search,
|
|
615
615
|
totalLoadedOptions,
|
|
616
|
-
} = useFieldOptions(field
|
|
616
|
+
} = useFieldOptions(field);
|
|
617
617
|
|
|
618
618
|
function handleInputChange(e) {
|
|
619
619
|
search(e.target.value);
|
|
@@ -713,52 +713,6 @@ function SelectField({ field, value, onChange, isMulti = false, context }) {
|
|
|
713
713
|
}
|
|
714
714
|
```
|
|
715
715
|
|
|
716
|
-
#### **Using Context with Select Fields**
|
|
717
|
-
|
|
718
|
-
The `useFieldOptions` hook now supports passing context data to the `getOptions` and `loadMore` methods. This is useful when you need to pass additional form data or parameters to filter or customize the options:
|
|
719
|
-
|
|
720
|
-
```tsx
|
|
721
|
-
function SelectFieldWithContext({ field, value, onChange, formData }) {
|
|
722
|
-
// Pass form data as context to the hook
|
|
723
|
-
const context = formData; // This will be passed to getOptions and loadMore
|
|
724
|
-
|
|
725
|
-
const {
|
|
726
|
-
options,
|
|
727
|
-
loading,
|
|
728
|
-
loadingMore,
|
|
729
|
-
hasNext,
|
|
730
|
-
loadMore,
|
|
731
|
-
error,
|
|
732
|
-
search,
|
|
733
|
-
totalLoadedOptions,
|
|
734
|
-
} = useFieldOptions(field, context);
|
|
735
|
-
|
|
736
|
-
// ... rest of the component logic remains the same
|
|
737
|
-
}
|
|
738
|
-
```
|
|
739
|
-
|
|
740
|
-
**When to use context:**
|
|
741
|
-
- When options depend on other form field values
|
|
742
|
-
- When you need to pass authentication tokens or user-specific data
|
|
743
|
-
- When implementing cascading dropdowns (e.g., country → state → city)
|
|
744
|
-
- When options need to be filtered based on current form state
|
|
745
|
-
|
|
746
|
-
**Example with cascading dropdowns:**
|
|
747
|
-
```tsx
|
|
748
|
-
function CascadingSelectField({ field, value, onChange, parentValue }) {
|
|
749
|
-
// Create context with parent field value
|
|
750
|
-
const context = {
|
|
751
|
-
parentField: parentValue,
|
|
752
|
-
// Add other relevant form data
|
|
753
|
-
};
|
|
754
|
-
|
|
755
|
-
const { options, loading, error, search } = useFieldOptions(field, context);
|
|
756
|
-
|
|
757
|
-
// The getOptions method in your field.optionsSource will receive this context
|
|
758
|
-
// and can use it to filter options based on the parent selection
|
|
759
|
-
}
|
|
760
|
-
```
|
|
761
|
-
|
|
762
716
|
### **Google Drive Picker Fields**
|
|
763
717
|
|
|
764
718
|
For Google Drive file picker fields, handle the file selection flow. These fields also work with `{ label, value }` objects:
|
|
@@ -23,7 +23,7 @@ import type { ConnectorField, SelectOption, FormData } from "@fastn-ai/core";
|
|
|
23
23
|
* // Pagination is managed with infinite query
|
|
24
24
|
* ```
|
|
25
25
|
*/
|
|
26
|
-
export declare function useFieldOptions(field: ConnectorField, context?: FormData
|
|
26
|
+
export declare function useFieldOptions(field: ConnectorField, context?: FormData): {
|
|
27
27
|
options: SelectOption[];
|
|
28
28
|
loading: boolean;
|
|
29
29
|
loadingMore: boolean;
|
package/dist/index.d.ts
CHANGED
|
@@ -41,7 +41,7 @@ declare const useConnectors: () => _tanstack_react_query.UseQueryResult<_fastn_a
|
|
|
41
41
|
* // Pagination is managed with infinite query
|
|
42
42
|
* ```
|
|
43
43
|
*/
|
|
44
|
-
declare function useFieldOptions(field: ConnectorField, context?: FormData
|
|
44
|
+
declare function useFieldOptions(field: ConnectorField, context?: FormData): {
|
|
45
45
|
options: SelectOption[];
|
|
46
46
|
loading: boolean;
|
|
47
47
|
loadingMore: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dev-fastn-ai/react-core",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.2",
|
|
4
4
|
"description": "React hooks and components for integrating Fastn AI connector marketplace into your applications. Built on top of @fastn-ai/core with React Query for optimal performance.",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -52,10 +52,10 @@
|
|
|
52
52
|
"license": "MIT",
|
|
53
53
|
"repository": {
|
|
54
54
|
"type": "git",
|
|
55
|
-
"url": "https://github.com/
|
|
55
|
+
"url": "https://github.com/fastn-ai/react-core.git"
|
|
56
56
|
},
|
|
57
57
|
"bugs": {
|
|
58
|
-
"url": "https://github.com/
|
|
58
|
+
"url": "https://github.com/fastn-ai/react-core/issues"
|
|
59
59
|
},
|
|
60
60
|
"homepage": "https://docs.fastn.ai",
|
|
61
61
|
"dependencies": {
|
|
@@ -89,4 +89,4 @@
|
|
|
89
89
|
"publishConfig": {
|
|
90
90
|
"access": "public"
|
|
91
91
|
}
|
|
92
|
-
}
|
|
92
|
+
}
|