Skip to main content

Text Component

The Text component is designed to provide flexible and styled text rendering. It allows you to easily apply various text styles and semantic variations.

Basic Usage​

All of the React.CSSProperties are valid prop with the benefit of passing just the number without unit (px are used by default). The library extents the CSS properties and adds all of them with Hover suffix that will take affect only when the component is hovered by the device pointer.

import { Text } from "react-better-html";

function App() {
   return (
      <Text color="#111111" paddingBottom={10}>
         This is a Text component.
      </Text>
   );
}

Common Props​

All standard text attributes are valid props for this component.

import { Text } from "react-better-html";

function App() {
   return (
      <Text
         title="A Text component"
         onClick={(event) => {
            console.log(event.clientX);
         }}
      >
         This is a Text component.
      </Text>
   );
}

Semantic DOM​

By default the <Text> component renders a <p> element in the DOM. To keep the semantic HTML you can pass a as props with the name of the tag you want to render

import { Text } from "react-better-html";

function App() {
   return (
      <Text
         as="h1"
         paddingInline={20}
      >
         This is an h1 Text component.
      </Text>
   );
}

In the above example the component will be rendered as <h1> component in the DOM

Subcomponents​

A number of components in the library have a subcomponent feature witch is like a preset of the same component that is frequently used.

Text.unknown​

This component renders with lighter color and in italic font style for caption use.

import { Div, Text } from "react-better-html";

function App() {
   return (
      <Div.box width="50%">
         <Text as="h2">Items:</Text>

         <Text.unknown>No items yet</Text.unknown>
      </Div.box>
   );
}

That renders to:

Items:

No items yet

Text.oneLine​

This component renders the text in the available space and then truncates to ...

import { Div, Text } from "react-better-html";

function App() {
   return (
      <Div.box>
         <Text.oneLine>
            This is really long text that is not going to be rendered fully because it is oneLine subcomponent and the
            holder component is not wide enough to render the long text
         </Text.oneLine>
      </Div.box>
   );
}

That renders to:

This is really long text that is not going to be rendered fully because it is oneLine subcomponent and the holder component is not wide enough to render the long text