Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Setup
  • Theming
  • Accessibility
  • Testing
  • Utilities
    • Accessibility
    • Auto sizer
    • Color palettes
    • Copy
    • CSS utility classes
    • Delay
    • Error boundary
    • Focus trap
    • Highlight and mark
    • HTML ID generator
    • I18n
    • Inner text
    • Mutation observer
    • Outside click detector
    • Overlay mask
    • Portal
    • Pretty duration
    • Provider
    • Resize observer
    • Scroll
    • Text diff
    • Text truncation
    • Window events
  • EUI
  • Utilities
  • Inner text

Inner text

For instances where accessing the text content of a component that may be wrapped or interspersed with other components, two utilities are available:

  • useInnerText - A custom React hook, usable in function components
  • <EuiInnerText /> - A higher order useInnerText component for use in class components

Both utilities make available a ref reference to add to the target DOM element, and the resulting innerText value to use as needed.

Rendered

Loading...

Props

EuiInnerText

๐˜‚๐˜‚
โœ„๐˜—โœ„๐˜—
Prop
โ†ฆ
Description and type
โ†ฆ
Default value
โ†ต
Prop
children#
โ†ฆ
Description and type

ReactNode to render as this component's content

Type: (ref?: (node: RefT) => void, innerText?: string) => ReactElement<any, string | JSXElementConstructor<any>>
โ†ฆ
Default value
Required
โ†ต
Prop
fallback#
โ†ฆ
Description and type
Type: string
โ†ฆ
Default value
โ†ต
๐˜‚๐˜‚
Edit this page

Previous
I18n
Next
Mutation observer
  • Rendered
  • Props
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with โค by Elastic