@fluidframework/react Package

Classes

List of classes contained in this package or namespace
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

List of functions contained in this package or namespace
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 for the view to use through a T[] interface. This SharedObjectSequence provided is automatically bound to the state update of the functional view useSyncedArray is called in.
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 that has been prepared for this view
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

List of interfaces contained in this package or namespace
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

List of variables contained in this package or namespace
Variable	Description
instanceOfAsyncEffectFunction
instanceOfAsyncStateUpdateFunction
instanceOfEffectFunction
instanceOfFluidObjectSelectorFunction
instanceOfIFluidLoadable
instanceOfSelectorFunction
instanceOfStateUpdateFunction

Type Aliases

List of type aliases contained in this package or namespace
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

List of 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 for the view to use through a T[] interface. This SharedObjectSequence provided is automatically bound to the state update of the functional view useSyncedArray is called in.

Signature:

export declare function setSyncedArrayConfig<T>(syncedDataObject: SyncedDataObject, syncedStateId: string, defaultValue?: T[], sharedObjectCreate?: typeof SharedObjectSequence.create): void;

Parameters

List of 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

List of 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

List of 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

List of 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

List of 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

List of 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 that has been prepared for this view

Signature:

export declare function useSyncedArray<T>(syncedDataObject: SyncedDataObject, syncedStateId: string, defaultValue?: T[]): [T[], ISyncedArrayReducer<T>];

Parameters

List of 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

List of 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

List of 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

List of 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>>;