FxDocumentLoader

How to get FxDocumentLoader

import FxDocumentLoader from 'fontoxml-fx/src/FxDocumentLoader.jsx'

Type: Component

Loads a document. This is used to create document previews for example. A new load will be initiated when the the remoteId changes.

Props

# Name Type Description
1. children Function

Implement children as a function. The function should return a react component.


  Arguments
# Name Type Description
1. properties Object
  Members

Members

Name Type Description
documentId DocumentId

The document ID of the loaded document

error Error | Null

The error that occurred, if any

isErrored Boolean

Wether the document is errored

isLoading Boolean

Wether the document is still loading

  Returns

Type: ReactElement

2. [onError] Function

A callback that is called when the document is errored.


  Arguments
# Name Type Description
1. remoteId RemoteDocumentId

The remote id of the document that errored while loading.

2. error String

The error that occured during loading.

3. [onLoadIsDone] Function

A callback that is called when the document has finished loading.


  Arguments
# Name Type Description
1. documentId Object

The document ID of the loaded document

4. remoteId RemoteDocumentId

The remote id of the the document that needs to be loaded.

5. [referrerDocumentId] RemoteDocumentId

The referring document.

Example

// An example on how the `FxDocumentLoader` can be used.

class DocumentPreview extends Component {
⋮
	render() {
		return(
			<FxDocumentLoader remoteId={selectedItem.id}>
				{({ isErrored, error, isLoading, documentId }) => {
					if (isErrored) {
						return (
							<Flex flex="1" paddingSize="l" isScrollContainer>
								<FxErroredTemplatedView error={error} />
							</Flex>
						);
					}

					if (isLoading) {
						return (<StateMessage title="Loading..." visual={<SpinnerIcon />} />);
					}

					return (<FxNodePreview documentId={documentId} />);
				}}
			</FxDocumentLoader>
		)
	}
}
Was this page helpful?