Sunday, May 5, 2019

React Tooltip Component published in NPM

Tooltip could be create with pure CSS, that's the example:
Such an awesome tooltip!

https://jsfiddle.net/AndrewBuntsev/jxk75o6c/

But I decided to go further and create a react component and publish it at NPM so that it could be reusable it other applications. That's the component HOC function implementation:
  
import React from "react";
import "./Tooltip.css";

export function tooltip(InnerComponent, options) {
  return class extends React.Component {
    render() {
      return (
        <div className="react-fancy-components-tooltip-container">
          <span className="tooltiptext" style={options.style}>
            {options.text}
          </span>
          {InnerComponent}
        </div>
      );
    }
  };
}

That's how we can use the tooltip function in another component:
  
import { tooltip } from "./components/tooltip/Tooltip";

function App() {
  let TooltippedComponent = tooltip(<input />, {
    text: "Awesome tooltip!!",
    style: {
      fontWeight: "bold"
    }
  });
  return (
    <div className="App">
      <TooltippedComponent />
    </div>
  );
}

If you you need a guide how to publish react components to NPM, follow this https://github.com/AndrewBuntsev/react-component-publish
Or if you just need this component you can install it from NPM https://www.npmjs.com/package/react-fancy-components
Its code on github https://github.com/AndrewBuntsev/react-fancy-components

No comments:

Post a Comment