Skip to main content

HTMLElementModel

reexport
class HTMLElementModel<
  T extends string,
  M extends HTMLContentModel
> {
  contentModel: M;
  getMixedUAStyles: undefined | (tnode: TNodeDescriptor, element: Element) => undefined
    | null
    | void
    | MixedStyleDeclaration;
  getReactNativeProps: undefined | (
    tnode: TText
      | TBlock
      | TPhrasing
      | TEmpty
      | TDocument,
    preGeneratedProps: null | ReactNativePropsSwitch,
    element: Element
  ) => undefined
    | null
    | void
    | ReactNativePropsDefinitions;
  getUADerivedStyleFromAttributes: undefined | (attributes: Record<string, string>, markers: Markers) => null | MixedStyleDeclaration;
  isOpaque: boolean;
  isVoid: boolean;
  mixedUAStyles?: MixedStyleDeclaration;
  reactNativeProps?: ReactNativePropsDefinitions;
  setMarkersForTNode?: SetMarkersForTNode;
  tagName: T;
  extend: <
    CM extends HTMLContentModel
  >(merger: (shape: HTMLElementModelShape<T, CM>) => Partial<HTMLElementModelShape<T, CM>>) => HTMLElementModel<T, CM>;
  extend: <
    CM extends HTMLContentModel
  >(shape: Partial<HTMLElementModelShape<T, CM>>) => HTMLElementModel<T, CM>;
  isTranslatableBlock: () => boolean;
  isTranslatableTextual: () => boolean;
  static fromCustomModel: <
    CustomTags extends string,
    ContentModel extends HTMLContentModel
  >(template: CustomElementModel<CustomTags, ContentModel>) => HTMLElementModel<CustomTags, ContentModel>;
  static fromNativeModel: <
    TN extends TagName,
    E extends ElementCategory
  >(nativeElementModel: NativeElementModel<TN, E>) => HTMLElementModel<TN, mixed | block | textual | none>;
}
Defined in @native-html/transient-render-engine

An object defining engine internals for tags, such as default styles (UAStyles), content model (how this tag is treated during hoisting)... etc.

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#

required
getMixedUAStyles: undefined | (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#

required
getReactNativeProps: undefined | (
  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#

required
getUADerivedStyleFromAttributes: undefined | (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.

Methods#

extend#

required
extend: <
  CM extends HTMLContentModel
>(merger: (shape: HTMLElementModelShape<T, CM>) => Partial<HTMLElementModelShape<T, CM>>) => HTMLElementModel<T, CM>;
extend: <
  CM extends HTMLContentModel
>(shape: Partial<HTMLElementModelShape<T, CM>>) => HTMLElementModel<T, CM>;

Create a new ​HTMLElementModel by shallow-merging properties into this model.

Parameters#

merger

A function to generate the new properties to shallow-merge into this model.

isTranslatableBlock#

required
isTranslatableBlock: () => boolean;

isTranslatableTextual#

required
isTranslatableTextual: () => boolean;

fromCustomModel#

static
required
static fromCustomModel: <
  CustomTags extends string,
  ContentModel extends HTMLContentModel
>(template: CustomElementModel<CustomTags, ContentModel>) => HTMLElementModel<CustomTags, ContentModel>;

Create an ​HTMLElementModel from a custom template.

Parameters#

template

The custom template.

fromNativeModel#

static
required
static fromNativeModel: <
  TN extends TagName,
  E extends ElementCategory
>(nativeElementModel: NativeElementModel<TN, E>) => HTMLElementModel<TN, mixed | block | textual | none>;

Create an ​HTMLElementModel from a native description.

Parameters#

nativeElementModel

The native model declaration.