@fluidframework/react Package
Packages > @fluidframework/react
Classes
Class | Description |
---|---|
FluidReactView | A React view with a synced state, initial props, and a Fluid-to-view state two-way mapping |
SyncedDataObject | SyncedDataObject is a base class for Fluid data objects with views. It extends DataObject. In addition to the root and task manager, the SyncedDataObject also provides a syncedStateConfig and assures that the syncedState will be initialized according the config by the time the view is rendered.As this is used for views, it also implements the IFluidHTMLView interface, and requires the render function to be filled in. |
Functions
Function | Description |
---|---|
createContextFluid(props, initialViewState) | |
setSyncedArrayConfig(syncedDataObject, syncedStateId, defaultValue, sharedObjectCreate) | Function to set the config for a synced array on a syncedDataObject's SharedMap synced state. This will initialize and provide a SharedObjectSequence |
setSyncedCounterConfig(syncedDataObject, syncedStateId, defaultValue, sharedObjectCreate) | Function to set the config for a synced counter on a syncedDataObject's SharedMap synced state. This will initialize and provide a SharedCount for the view to use. This SharedString provided is automatically bound to the state update of the functional view useSyncedCounter is called in. |
setSyncedObjectConfig(syncedDataObject, syncedStateId, defaultValue) | Function to set the config for any type T object on a syncedDataObject's SharedMap synced state |
setSyncedStringConfig(syncedDataObject, syncedStateId, defaultValue) | Function to set the config for a synced string on a syncedDataObject's SharedMap synced state. This will initialize and provide a SharedString for the view to use. This SharedString provided is automatically bound to the state update of the functional view useSyncedString is called in. It can also easily be placed in a CollaborativeInput within a React view. |
useReducerFluid(props, initialViewState) | |
useStateFluid(props, initialViewState) | A wrapper around the useState React hook that combines local and Fluid state updates |
useSyncedArray(syncedDataObject, syncedStateId, defaultValue) | Function to use the synced array state powered by a SharedObjectSequence |
useSyncedCounter(syncedDataObject, syncedStateId, defaultValue) | Function to use the synced counter state powered by a SharedCounter that has been prepared for this view |
useSyncedObject(syncedDataObject, syncedStateId, defaultValue) | Function to use the synced state of type T that has been prepared for this view |
useSyncedString(syncedDataObject, syncedStateId) | Function to use the SharedString state that has been prepared for this view |
Interfaces
Interface | Description |
---|---|
FluidAsyncEffectFunction | Definition for an async effect function used in reducers |
FluidAsyncStateUpdateFunction | Definition for an async state update function used in reducers |
FluidContext | The returned value of createFluidContext |
FluidContextState | The state that is available through the react context |
FluidEffectFunction | Definition for an effect function used in reducers |
FluidObjectSelectorFunction | Definition for a Fluid object selector function used in selectors |
FluidSelectorFunction | Definition for a selector function used in selectors |
FluidStateUpdateFunction | Definition for a state update function used in reducers |
ICombinedState | The combined state contains the Fluid and view states and the data props that are passed in to all reducers and selectors |
IFluidContextProps | Props containing the context that will be passed down through the Fluid context provider to the consumer |
IFluidConverter | Fluid converters to take the view state value that they are keyed against in the ViewToFluid map and convert them into their synced Fluid state counterparts |
IFluidDataProps | Base interface to extend from for the data props that will be passed in for reducers and selectors to use to offer inter-Fluid object operability |
IFluidObjectMapItem | The values stored in the Fluid object map |
IFluidProps | Props passed in to create a FluidReactView or passed in to the useStateFluid hook |
IFluidReducer | The Fluid reducer, containing an object that is keyed by function name and contains state update and effect functions. Each function will have the view state, fluid state, and data props passed into it as parameters in the combined state. State update functions are used to modify values on the state and return the updated state and any new Fluid object handles. Effect functions use values on the state to apply changes elsewhere. They do not return any new objects or state. |
IFluidReducerProps | Props passed in to the useReducerFluid hook |
IFluidSchema | The Fluid schema that is generated on load and will be stored in the synced state |
IFluidSelector | The Fluid selector, containing an object that is keyed by function name and contains selector functions. Each function will have the view state, fluid state, and data props passed into it as parameters in the combined state. Selector functions can also optionally pass in a handle to fetch from the Fluid object map. Selector functions are used to retrieve Fluid objects or parameters from other Fluid objects. It offers a way to fetch these values and return them to the view, with the Fluid object map being updated if the view requires a Fluid object that hasn't been locally loaded yet |
IFluidState | Base interface to extend from for the Fluid state. These values can and should be left undefined when passing in the initial state as they will be used to establish the Fluid state |
IFluidSyncedArrayReducer | The underlying reducer interface passed to the useReducerFluid hook to bind the view and Fluid state definitions together |
IFluidSyncedCounterReducer | The underlying reducer interface passed to the useReducerFluid hook to bind the view and Fluid state definitions together |
IStateUpdateResult | The value returned by state update functions. |
ISyncedArrayFluidState | The state interface for the Fluid data source that powers the synced array |
ISyncedArrayReducer | The reducer interface for modifying the synced array TODO: Add more functions that further expose the SharedObjectSequence interface for use |
ISyncedArrayViewState | The state interface exposed to the view for the synced array |
ISyncedCounterFluidState | The state interface for the Fluid data source that powers the synced counter |
ISyncedCounterReducer | The reducer interface for incrementing the synced counter |
ISyncedCounterViewState | The state interface exposed to the view for the synced counter |
ISyncedMapState | The synced state definition that will fill the value parameter with the type T object that will be defined in the synced state config |
ISyncedState | The interface for interacting with the synced state that is stored on a SyncedDataObject |
ISyncedStateConfig | |
ISyncedStringState | The state definition for a synced string TODO: Add a proper SharedString to string mapping but, for now, you can pass the pre-initialized SharedString directly into the CollaborativeInput provided by the react-inputs package from within the React functional view useSyncedString is called in |
IViewConverter | View converters to take the synced state Fluid value that they are keyed against in the FluidToView map and convert them into their view state counterparts |
IViewState | Base interface to extend from for the view state. This should be crafted based off of what the view will use from the Fluid state. |
Variables
Variable | Description |
---|---|
instanceOfAsyncEffectFunction | |
instanceOfAsyncStateUpdateFunction | |
instanceOfEffectFunction | |
instanceOfFluidObjectSelectorFunction | |
instanceOfIFluidLoadable | |
instanceOfSelectorFunction | |
instanceOfStateUpdateFunction |
Type Aliases
Type Alias | Description |
---|---|
FluidObjectMap | A map of the Fluid object handle absolute path to the Fluid object |
FluidToViewMap | A map of the Fluid state values that need conversion to their view state counterparts and the respective converters |
IFluidReactState | |
SyncedStateConfig | The configurations that define the relationships between Fluid and view states for views that are rendered in a SyncedDataObject |
ViewToFluidMap | A map of the view state values that need conversion to their Fluid state counterparts and the respective converters |
Functions
createContextFluid
Signature:
export declare function createContextFluid<SV extends IViewState, SF extends IFluidState, C>(props: IFluidContextProps<SV, SF, C>, initialViewState: SV): FluidContext<SV, C>;
Parameters
Parameter | Type | Description |
---|---|---|
props | IFluidContextProps |
|
initialViewState | SV |
Returns:
FluidContext<SV, C>
setSyncedArrayConfig
Function to set the config for a synced array on a syncedDataObject’s SharedMap synced state. This will initialize and provide a SharedObjectSequence
Signature:
export declare function setSyncedArrayConfig<T>(syncedDataObject: SyncedDataObject, syncedStateId: string, defaultValue?: T[], sharedObjectCreate?: typeof SharedObjectSequence.create): void;
Parameters
Parameter | Type | Description |
---|---|---|
syncedDataObject | SyncedDataObject | The Fluid data object on which the synced state config is being set |
syncedStateId | string | The ID of the view state that this config schema is being set for |
defaultValue | T[] | The default values in the view array prior to the SharedObjectSequence initializing |
sharedObjectCreate | typeof SharedObjectSequence.create | The creation function for the SharedObjectSequence. This can be set to pre-increment the sequence with initial values. |
Returns:
void
setSyncedCounterConfig
Function to set the config for a synced counter on a syncedDataObject’s SharedMap synced state. This will initialize and provide a SharedCount for the view to use. This SharedString provided is automatically bound to the state update of the functional view useSyncedCounter is called in.
Signature:
export declare function setSyncedCounterConfig(syncedDataObject: SyncedDataObject, syncedStateId: string, defaultValue?: number, sharedObjectCreate?: (runtime: IFluidDataStoreRuntime) => SharedCounter): void;
Parameters
Parameter | Type | Description |
---|---|---|
syncedDataObject | SyncedDataObject | The Fluid data object on which the synced state config is being set |
syncedStateId | string | The ID of the view state that this config schema is being set for |
defaultValue | number | The default number the view value will be set to prior to the Fluid counter initializing |
sharedObjectCreate | (runtime: IFluidDataStoreRuntime) => SharedCounter | The creation function for the SharedCounter. This can be set to pre-increment the counter |
Returns:
void
setSyncedObjectConfig
Function to set the config for any type T object on a syncedDataObject’s SharedMap synced state
Signature:
export declare function setSyncedObjectConfig<T>(syncedDataObject: SyncedDataObject, syncedStateId: string, defaultValue: T): void;
Parameters
Parameter | Type | Description |
---|---|---|
syncedDataObject | SyncedDataObject | The Fluid data object on which the synced state config is being set |
syncedStateId | string | The ID of the view state that this config schema is being set for |
defaultValue | T | The default value of type T that the state will be initialized with prior to Fluid initialization |
Returns:
void
setSyncedStringConfig
Function to set the config for a synced string on a syncedDataObject’s SharedMap synced state. This will initialize and provide a SharedString for the view to use. This SharedString provided is automatically bound to the state update of the functional view useSyncedString is called in. It can also easily be placed in a CollaborativeInput within a React view.
Signature:
export declare function setSyncedStringConfig(syncedDataObject: SyncedDataObject, syncedStateId: string, defaultValue: string): void;
Parameters
Parameter | Type | Description |
---|---|---|
syncedDataObject | SyncedDataObject | The Fluid data object on which the synced state config is being set |
syncedStateId | string | The ID of the view state that this config schema is being set for |
defaultValue | string | The default string that the SharedString will be initialized as |
Returns:
void
useReducerFluid
Signature:
export declare function useReducerFluid<SV extends IViewState, SF extends IFluidState, A extends IFluidReducer<SV, SF, C>, B extends IFluidSelector<SV, SF, C>, C extends IFluidDataProps>(props: IFluidReducerProps<SV, SF, A, B, C>, initialViewState: SV): [ICombinedState<SV, SF, C>, A, B];
Parameters
Parameter | Type | Description |
---|---|---|
props | IFluidReducerProps |
|
initialViewState | SV |
Returns:
[ICombinedState<SV, SF, C>, A, B]
useStateFluid
A wrapper around the useState React hook that combines local and Fluid state updates
Signature:
export declare function useStateFluid<SV extends IViewState, SF extends IFluidState>(props: IFluidProps<SV, SF>, initialViewState: SV): [SV, (newState: SV, isSyncedStateUpdate?: boolean) => void];
Parameters
Parameter | Type | Description |
---|---|---|
props | IFluidProps |
|
initialViewState | SV |
Returns:
[SV, (newState: SV, isSyncedStateUpdate?: boolean) => void]
useSyncedArray
Function to use the synced array state powered by a SharedObjectSequence
Signature:
export declare function useSyncedArray<T>(syncedDataObject: SyncedDataObject, syncedStateId: string, defaultValue?: T[]): [T[], ISyncedArrayReducer<T>];
Parameters
Parameter | Type | Description |
---|---|---|
syncedDataObject | SyncedDataObject | The Fluid data object that holds the synced state config for this view |
syncedStateId | string | The ID of this view state |
defaultValue | T[] |
Returns:
[T[], ISyncedArrayReducer<T>]
[ the array of T objects currently in the SharedObjectSequence, the reducer to modify values on the SharedObjectSequence ]
useSyncedCounter
Function to use the synced counter state powered by a SharedCounter that has been prepared for this view
Signature:
export declare function useSyncedCounter(syncedDataObject: SyncedDataObject, syncedStateId: string, defaultValue?: number): [number, ISyncedCounterReducer];
Parameters
Parameter | Type | Description |
---|---|---|
syncedDataObject | SyncedDataObject | The Fluid data object that holds the synced state config for this view |
syncedStateId | string | The ID of this view state |
defaultValue | number |
Returns:
[number, ISyncedCounterReducer]
[ the number that the SharedCounter has been incremented to, the reducer to modify the SharedCounter by incrementing it ]
useSyncedObject
Function to use the synced state of type T that has been prepared for this view
Signature:
export declare function useSyncedObject<T>(syncedDataObject: SyncedDataObject, syncedStateId: string, defaultValue: T): [T, (newState: T) => void];
Parameters
Parameter | Type | Description |
---|---|---|
syncedDataObject | SyncedDataObject | The Fluid data object that holds the synced state config for this view |
syncedStateId | string | The ID of this view state |
defaultValue | T | The default value of type T that the view state will be initialized with |
Returns:
[T, (newState: T) => void]
[the initialized synced state of type T, a synced setState call for the state]
useSyncedString
Function to use the SharedString state that has been prepared for this view
Signature:
export declare function useSyncedString(syncedDataObject: SyncedDataObject, syncedStateId: string): [SharedString | undefined, (newState: ISyncedStringState) => void];
Parameters
Parameter | Type | Description |
---|---|---|
syncedDataObject | SyncedDataObject | The Fluid data object that holds the synced state config for this view |
syncedStateId | string | The ID of this view state |
Returns:
[SharedString | undefined, (newState: ISyncedStringState) => void]
[the initialized SharedString, a synced setState call for the SharedString]
Variables
instanceOfAsyncEffectFunction
Signature:
instanceOfAsyncEffectFunction: <SV extends IViewState, SF extends IFluidState, C extends IFluidDataProps>(object: any) => object is FluidAsyncEffectFunction<SV, SF, C>
instanceOfAsyncStateUpdateFunction
Signature:
instanceOfAsyncStateUpdateFunction: <SV extends IViewState, SF extends IFluidState, C extends IFluidDataProps>(object: any) => object is FluidAsyncStateUpdateFunction<SF, SV, C>
instanceOfEffectFunction
Signature:
instanceOfEffectFunction: <SV extends IViewState, SF extends IFluidState, C extends IFluidDataProps>(object: any) => object is FluidEffectFunction<SV, SF, C>
instanceOfFluidObjectSelectorFunction
Signature:
instanceOfFluidObjectSelectorFunction: <SV extends IViewState, SF extends IFluidState, C extends IFluidDataProps>(object: any) => object is FluidObjectSelectorFunction<SV, SF, C>
instanceOfIFluidLoadable
Signature:
instanceOfIFluidLoadable: (object: any) => object is IFluidLoadable
instanceOfSelectorFunction
Signature:
instanceOfSelectorFunction: <SV extends IViewState, SF extends IFluidState, C extends IFluidDataProps>(object: any) => object is FluidSelectorFunction<SV, SF, C>
instanceOfStateUpdateFunction
Signature:
instanceOfStateUpdateFunction: <SV extends IViewState, SF extends IFluidState, C extends IFluidDataProps>(object: any) => object is FluidStateUpdateFunction<SV, SF, C>
Type Aliases
FluidObjectMap
A map of the Fluid object handle absolute path to the Fluid object
Signature:
export declare type FluidObjectMap = Map<string, IFluidObjectMapItem>;
FluidToViewMap
A map of the Fluid state values that need conversion to their view state counterparts and the respective converters
Signature:
export declare type FluidToViewMap<SV, SF> = Map<keyof SF, IViewConverter<SV, SF>>;
IFluidReactState
Signature:
export declare type IFluidReactState = IFluidState & IViewState;
SyncedStateConfig
The configurations that define the relationships between Fluid and view states for views that are rendered in a SyncedDataObject
Signature:
export declare type SyncedStateConfig = Map<string, ISyncedStateConfig<any, any>>;
ViewToFluidMap
A map of the view state values that need conversion to their Fluid state counterparts and the respective converters
Signature:
export declare type ViewToFluidMap<SV, SF> = Map<keyof SV, IFluidConverter<SV, SF>>;