react

Functions

AnimationToggle()

function AnimationToggle(__namedParameters): Element | null;

Play/pause for MaterialX <time>/<frame> nodes; renders nothing unless the document uses them.

Parameters

Parameter	Type
__namedParameters	AnimationToggleProps

Returns

Element | null

---

InfoPanel()

function InfoPanel(__namedParameters): Element;

Parameters

Parameter	Type
__namedParameters	InfoPanelProps

Returns

Element

---

LogPanel()

function LogPanel(__namedParameters): Element;

Parameters

Parameter	Type
__namedParameters	LogPanelProps

Returns

Element

---

MaterialSelect()

function MaterialSelect(__namedParameters): Element | null;

Floating material picker for the top of a viewer frame; renders nothing for single-material documents.

Parameters

Parameter	Type
__namedParameters	MaterialSelectProps

Returns

Element | null

---

MaterialViewTabs()

function MaterialViewTabs(__namedParameters): Element;

Shared shadcn/ui tabs. Keep the preview mounted to preserve its scene and camera.

Parameters

Parameter	Type
__namedParameters	{ preview: ReactNode; graph: ReactNode; className?: string; }
__namedParameters.preview	ReactNode
__namedParameters.graph	ReactNode
__namedParameters.className?	string

Returns

Element

---

MaterialViewer()

function MaterialViewer(__namedParameters): Element;

React wrapper for <material-viewer>, with the same attributes and optional callbacks.

Parameters

Parameter	Type
__namedParameters	MaterialViewerProps

Returns

Element

---

ValidityChecks()

function ValidityChecks(__namedParameters): Element;

Parameters

Parameter	Type
__namedParameters	DiagnosticInput

Returns

Element

---

ViewerSettingsPanel()

function ViewerSettingsPanel(__namedParameters): Element;

Gear button in the viewer's bottom-right corner that opens a popover of viewer controls; closes on X, Escape or a click outside.

Parameters

Parameter	Type
__namedParameters	ViewerSettingsPanelProps

Returns

Element

---

cn()

function cn(...inputs): string;

Parameters

Parameter	Type
...inputs	ClassValue[]

Returns

string

Interfaces

AnimationToggleProps

Properties

Property	Type
viewer	Viewer | null
mode?	AnimationMode
className?	string

---

MaterialSummary

Structural subset of mtlx-core's MaterialXSummary, so this package needs no mtlx-core dependency.

Properties

Property	Type
version?	string
colorspace?	string
nodeGraphCount	number
topLevelNodeCount	number
materials	object[]
nodes	object[]
referencedTextures	string[]

---

MaterialAsset

Structural subset of mtlx-core's MaterialXAsset.

Properties

Property	Type
path	string
bytes?	number

---

InfoPanelProps

Properties

Property	Type	Description
fileName?	string	-
fileSize?	number	-
summary?	MaterialSummary	-
assets?	MaterialAsset[]	Root document first, then every dependency; sizes are uncompressed.
issues	ValidationIssue[]	-
parseError?	string	-
viewerError?	string | null	-
preview?	PreviewReport	-
localFile?	boolean	-
resourcesChecked?	boolean	-

---

LogPanelProps

Extends

• ComponentProps<"div">

Properties

Property	Type
lines	string[]

---

MaterialSelectProps

Properties

Property	Type
names	string[]
value	string
onChange	(name) => void

---

MaterialViewerProps

Properties

Property	Type	Description
ref?	Ref<MaterialViewerElement>	Access the custom-element API, including toBlob().
src?	string	-
alt?	string	Accessible description announced for the focusable material preview.
model?	string	-
ibl?	string	-
geometry?	string	-
camera-orbit?	string	-
camera-target?	string	-
field-of-view?	string | number	-
material?	string	-
rotate?	"true" | "false"	-
bloom?	"true" | "false"	-
ao?	"true" | "false"	-
background?	"none" | "white" | "environment"	-
tone-mapping?	string	-
exposure?	number	-
intensity?	number	-
environment-rotation?	number	-
animation?	"false" | "play" | "pause"	-
settings-panel?	"open" | "closed" | "hidden"	-
errors?	"silent"	-
id?	string	-
className?	string	-
style?	CSSProperties	-
children?	ReactNode	Children may include an empty or custom slot="progress-bar" element.
onProgress?	(progress) => void	-
onLoad?	() => void	The preview is ready, after downloading and initializing the renderer.
onCameraChange?	(settings) => void	-
onError?	(message) => void	-

---

ViewerSettingsPanelProps

Extends

• Omit<ComponentProps<"div">, "onChange">

Properties

Property	Type	Description
settings	ViewerSettings	-
onChange	(patch) => void	-
geometries?	SettingsOption[]	-
ibls?	SettingsOption[]	-
rotating?	boolean	Effective rotation shown in the checkbox (e.g. forced off by reduced-motion preferences).
rotateDisabled?	boolean	-

References

MaterialProgress

Re-exports MaterialProgress

---

MaterialViewerProgress

Re-exports MaterialViewerProgress

---

GEOMETRY_OPTIONS

Re-exports GEOMETRY_OPTIONS

---

IBL_OPTIONS

Re-exports IBL_OPTIONS

---

SettingsOption

Re-exports SettingsOption

---

ScreenshotOptions

Re-exports ScreenshotOptions

---

MaterialViewerElement

Re-exports MaterialViewerElement

Type Aliases

ValidityChecksProps

type ValidityChecksProps = DiagnosticInput;