transpose

Maps the element into another one.

// Transpose wrapper components
import Tooltip from './Tooltip'

export default function App() {
  return ([
    // Tooltip 'contains' the button? Counterintuitive hierarchy
    <Tooltip title="Hello">
      <button>Hover me 1</button>
    </Tooltip>,

    // Makes more sense, and easier to control it as a prop
    <button x-transpose={$ => <Tooltip title="Hello">{$}</Tooltip>}>
      Hover me 2
    </button>
  ])
}

Open Sandbox

Installation

npm install react-beyond @react-beyond/transpose

Usage

import { Beyond } from 'react-beyond'
import { classFor } from '@react-beyond/transpose'

<Beyond features={[transpose()]}>
  <App />
</Beyond>

// ...

function Component() {
  <Element x-transpose={$ => <Wrapper>{$}</Wrapper>}>
    Something
  </Element>
}

Options

• id - The id of the feature HOC. Defaults to "transpose".

Directives

• 'x-transpose'?: (self: ReactElement) => ReactElement - Render function which maps the original element into another one.