Skip to main content

HTMLElementModelShape

reexport
interface HTMLElementModelShape<
  T extends string,
  M extends HTMLContentModel
> {
  contentModel: M;
  getMixedUAStyles?: (tnode: TNodeDescriptor, element: Element) => undefined
    | null
    | void
    | MixedStyleDeclaration;
  getReactNativeProps?: (
    tnode: TText
      | TBlock
      | TPhrasing
      | TEmpty
      | TDocument,
    preGeneratedProps: null | ReactNativePropsSwitch,
    element: Element
  ) => undefined
    | null
    | void
    | ReactNativePropsDefinitions;
  getUADerivedStyleFromAttributes?: (attributes: Record<string, string>, markers: Markers) => null | MixedStyleDeclaration;
  isOpaque: boolean;
  isVoid: boolean;
  mixedUAStyles?: MixedStyleDeclaration;
  reactNativeProps?: ReactNativePropsDefinitions;
  setMarkersForTNode?: SetMarkersForTNode;
  tagName: T;
}
Defined in @native-html/transient-render-engine

An object to specify custom tags.

Type Parameters#

T#

The name of the tag to which the model will apply.

M#

The ​HTMLContentModel associated with this tag.

Fields#

contentModel#

required
contentModel: M;

The ​HTMLContentModel attached to this model.

getMixedUAStyles#

optional
getMixedUAStyles?: (tnode: TNodeDescriptor, element: Element) => undefined
  | null
  | void
  | MixedStyleDeclaration;

A function to create conditional "user-agent" styles.

Remarks

For example, <a> tags will have underline decoration and be colored blue only when href is defined.

getReactNativeProps#

optional
getReactNativeProps?: (
  tnode: TText
    | TBlock
    | TPhrasing
    | TEmpty
    | TDocument,
  preGeneratedProps: null | ReactNativePropsSwitch,
  element: Element
) => undefined
  | null
  | void
  | ReactNativePropsDefinitions;

A function to create React Native props from a ​TNode grouped by native components.

Those props will be deep-merged over the pre-generated props. You can preserve some of the pre-generated props since you receive them as second argument.

Merge strategy (latest overrides former):

  1. props from reactNativeProps,
  2. auto-generated props from attributes
  3. props returned by this function

Returns: React Native props grouped by native components (see ​ReactNativePropsDefinitions). Those props will be passed to the underlying native component at render time.

Example#

import { defaultHTMLElementModels } from "react-native-render-html";
const customHTMLElementModels = {
a: defaultHTMLElementModels.a.extend({
getReactNativeProps(tnode) {
const attributes = tnode.attributes;
return {
native: {
accessibilityHint:
attributes['data-scope'] === 'internal'
? 'Open in a new screen.'
: 'Open in system web browser.',
},
};
},
}),
};

getUADerivedStyleFromAttributes#

optional
getUADerivedStyleFromAttributes?: (attributes: Record<string, string>, markers: Markers) => null | MixedStyleDeclaration;

A function to create conditional "user-agent" styles.

Deprecated

This feature will be removed in the next major release. Use ​getMixedUAStyles instead.

isOpaque#

required
isOpaque: boolean;

An opaque element translated ​TNode will have no translated ​TNode children.

isVoid#

required
isVoid: boolean;

true when the associated tag is a void element.

Remarks
  • Void elements cannot have children.
  • TText-translated void elements will be preserved even though they don't have children.

mixedUAStyles#

optional
mixedUAStyles?: MixedStyleDeclaration;

Equivalent of "user-agent" styles. The default styles for the element.

Remarks

These styles will be merged over by tagsStyles.

reactNativeProps#

optional
reactNativeProps?: ReactNativePropsDefinitions;

React Native props grouped by native components. Those props will be passed to the underlying native component at render time.

Remarks

Some props might be overriden by props derived from the ​TNode attributes. For example, if you pass accessibilityLabel and there is an aria-label attribute attached to one node, the aria-label will be used. If you want to be able to override the aria-label, use ​getReactNativeProps instead.

Example#

import {HTMLElementModel, HTMLContentModel} from 'react-native-render-html';
const customHTMLElementModels = {
'nav-button': HTMLElementModel.fromCustomModel({
tagName: 'nav-button',
contentModel: HTMLContentModel.block,
reactNativeProps: {
native: {
onPress() {
console.info('nav-button pressed');
},
},
},
}),
};

setMarkersForTNode#

optional
setMarkersForTNode?: SetMarkersForTNode;

Derive markers for one TNode.

tagName#

required
tagName: T;

The tag name associated with this model.