react-custom-renderer-starter
An implementation for a custom renderer for React
How to create your custom renderer
In order to create a custom renderer, you have to define a HostConfig, see the HostConfig Interface below.
For your references, these are HostConfigs of custom renderers
- react-dom
- react-native
- react-test-renderer
- react-konva
HostConfig Interface
getPublicInstance(instance: Instance | TextInstance): PublicInstance;
Return a public instance of Host component.
react-dom
returns a DOM element because it is a public instance that you can get through ref
.
getRootHostContext(rootContainerInstance: Container): HostContext;
getChildHostContext(parentHostContext: HostContext, type: Type, rootContainerInstance: Container): HostContext
prepareForCommit(containerInfo: Container): void;
resetAfterCommit(containerInfo: Container): void;
createInstance(type: Type, props: Props, rootContainerInstance: Container, hostContext: HostContext, internalInstanceHandle: OpaqueHandle): Instance;
Return an instance.
react-dom
returns a DOM element.
appendInitialChild(parentInstance: Instance, child: Instance | TextInstance): void;
Append an instance into a parent instance.
react-dom
calls parentInstance.appendChild(child)
.
This is called in the render phase but it's ok because a DOM tree hasn't been mounted yet.
finalizeInitialChildren(parentInstance: Instance, type: Type, props: Props, rootContainerInstance: Container, hostContext: HostContext): boolean;
Set initial properties and return whether commitMount
should be called in later or not.
react-dom
set DOM properties and return a boolean that indicates whether dom.focus()
should be called in commitMount
or not.
prepareUpdate(instance: Instance, type: Type, oldProps: Props, newProps: Props, rootContainerInstance: Container, hostContext: HostContext): null | UpdatePayload;
Return updatePayload
includes properties for diffs
react-dom
returns a props list has to be applied.
shouldSetTextContent(type: Type, props: Props): boolean;
Return whether its content is a textContext or not.
shouldDeprioritizeSubtree(type: Type, props: Props): boolean;
Return whether updating its subtree is deprioritized or not.
react-dom
return a flag whether hidden
prop is true
or not.
createTextInstance(text: string, rootContainerInstance: Container, hostContext: HostContext, internalInstanceHandle: OpaqueHandle): TextInstance;
Return an text instance.
react-dom
return a textNode.
scheduleDeferredCallback(callback: () => any, options?: { timeout: number }): any;
cancelDeferredCallback(callbackID: any): void;
setTimeout(handler: (...args: any[]) => void, timeout: number): TimeoutHandle | NoTimeout;
clearTimeout(handle: TimeoutHandle | NoTimeout): void;
noTimeout: NoTimeout;
now(): number;
isPrimaryRenderer: boolean;
// Temporary workaround for scenario where multiple renderers concurrently
// render using the same context objects. E.g. React DOM and React ART on the
// same page. DOM is the primary renderer; ART is the secondary renderer.
supportsMutation: boolean;
supportsPersistence: boolean;
supportsHydration: boolean;
Mutation (optional)
appendChild?(parentInstance: Instance, child: Instance | TextInstance): void;
appendChildToContainer?(container: Container, child: Instance | TextInstance): void;
commitTextUpdate?(textInstance: TextInstance, oldText: string, newText: string): void;
commitMount?(instance: Instance, type: Type, newProps: Props, internalInstanceHandle: OpaqueHandle): void;
commitUpdate?(instance: Instance, updatePayload: UpdatePayload, type: Type, oldProps: Props, newProps: Props, internalInstanceHandle: OpaqueHandle): void;
insertBefore?(parentInstance: Instance, child: Instance | TextInstance, beforeChild: Instance | TextInstance): void;
insertInContainerBefore?(container: Container, child: Instance | TextInstance, beforeChild: Instance | TextInstance): void;
removeChild?(parentInstance: Instance, child: Instance | TextInstance): void;
removeChildFromContainer?(container: Container, child: Instance | TextInstance): void;
resetTextContent?(instance: Instance): void;
Persistence (optional)
cloneInstance?(instance: Instance, updatePayload: null | UpdatePayload, type: Type, oldProps: Props, newProps: Props, internalInstanceHandle: OpaqueHandle, keepChildren: boolean, recyclableInstance: Instance): Instance;
createContainerChildSet?(container: Container): ChildSet;
appendChildToContainerChildSet?(childSet: ChildSet, child: Instance | TextInstance): void;
finalizeContainerChildren?(container: Container, newChildren: ChildSet): void;
replaceContainerChildren?(container: Container, newChildren: ChildSet): void;
Hydration (optional)
canHydrateInstance?(instance: HydratableInstance, type: Type, props: Props): null | Instance;
canHydrateTextInstance?(instance: HydratableInstance, text: string): null | TextInstance;
getNextHydratableSibling?(instance: Instance | TextInstance | HydratableInstance): null | HydratableInstance;
getFirstHydratableChild?(parentInstance: Instance | Container): null | HydratableInstance;
hydrateInstance?(instance: Instance, type: Type, props: Props, rootContainerInstance: Container, hostContext: HostContext, internalInstanceHandle: OpaqueHandle): null | UpdatePayload;
hydrateTextInstance?(textInstance: TextInstance, text: string, internalInstanceHandle: OpaqueHandle): boolean;
didNotMatchHydratedContainerTextInstance?(parentContainer: Container, textInstance: TextInstance, text: string): void;
didNotMatchHydratedTextInstance?(parentType: Type, parentProps: Props, parentInstance: Instance, textInstance: TextInstance, text: string): void;
didNotHydrateContainerInstance?(parentContainer: Container, instance: Instance | TextInstance): void;
didNotHydrateInstance?(parentType: Type, parentProps: Props, parentInstance: Instance, instance: Instance | TextInstance): void;
didNotFindHydratableContainerInstance?(parentContainer: Container, type: Type, props: Props): void;
didNotFindHydratableContainerTextInstance?(parentContainer: Container, text: string): void;
didNotFindHydratableInstance?(parentType: Type, parentProps: Props, parentInstance: Instance, type: Type, props: Props): void;
didNotFindHydratableTextInstance?(parentType: Type, parentProps: Props, parentInstance: Instance, text: string): void;