react hook to truncate text in the middle

I prefer hooks over components because components limit my styling.

playable example

use

npm install @pangrr/react-truncate-middle

import useTruncateMiddle from "@pangrr/react-truncate-middle"
import { Tooltip } from "react-tooltip"

function App() {
  const text =
    "this is a very looooooooong text this is a very looooooooong text this is a very looooooooong text"
  const { handleContainer, truncatedText } = useTruncateMiddle(text)

  return (
    <>
      /* use "noWrap" to prevent temporary text wrap when container width
      quickly descreases */
      <div ref={handleContainer} style={{ textWrap: "noWrap" }}>
        {truncatedText}
      </div>
      {truncatedText !== text && <Tooltip>{text}</Tooltip>}
    </>
  )
}