delpikye-v/react-material-tc-ifv4

React mui-v4. Truncate text and show tooltip if need.

react-material-tc-i4z

react-material-tc-i4z

LIVE EXAMPLE

---

Description

React Material (v.4). Truncate text and show tooltip if need (Text overflow)

---

Usage

Install the package

npm install react-material-tc-i4z

Import the module in the place you want to use:

import "react-material-tc-i4z/dist/styles.css";

import TruncateTooltip from "react-material-tc-i4z";

Snippet

simple

const [size, setSize] = useState(200);

<Button
  onClick={() => setSize(400)}
  onClick={() => setSize(200)}
  // style={{
  //    width: size, // => you should update it from css class
  // }}
  >
  <TruncateShowTooltip title="abdc">
    <span // it should be html element.
      style={{
        width: size, // => you should update it from css class
      }}
    >
      Hellofds fdsfsfsfdsdf fdsf s
    </span>
  </TruncateShowTooltip>
</Button>

---

props

TooltipProps: from react: @material-ui/core

props	type	description
always	boolean	default: false: show if text is overflow
bootstrapCss	boolean	default: true: arrow and color like bootstrapCss
tooltipBgColor	string	default: #000:
tooltipColor	string	default: #fff:

Note

RUN

LIVE EXAMPLE

License

MIT