{"id":42417431,"url":"https://github.com/taboola/react-mint","last_synced_at":"2026-01-28T02:06:39.671Z","repository":{"id":57334616,"uuid":"165686532","full_name":"taboola/react-mint","owner":"taboola","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-05T02:44:09.000Z","size":94,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-10-17T10:53:09.174Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/taboola.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-14T15:38:24.000Z","updated_at":"2024-09-08T18:45:49.000Z","dependencies_parsed_at":"2022-09-08T06:42:02.475Z","dependency_job_id":null,"html_url":"https://github.com/taboola/react-mint","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/taboola/react-mint","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taboola%2Freact-mint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taboola%2Freact-mint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taboola%2Freact-mint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taboola%2Freact-mint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taboola","download_url":"https://codeload.github.com/taboola/react-mint/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taboola%2Freact-mint/sbom","scorecard":{"id":865151,"data":{"date":"2025-08-18","repo":{"name":"github.com/taboola/react-mint","commit":"45768878f70a3928ad3d12cc838fc0f23c24acb0"},"scorecard":{"version":"v5.2.1-41-g40576783","commit":"40576783fda6698350fcbbeaea760ff827433034"},"score":3,"checks":[{"name":"Code-Review","score":0,"reason":"Found 1/28 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#maintained"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#pinned-dependencies"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#fuzzing"}},{"name":"License","score":9,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Warn: project license file does not contain an FSF or OSI license."],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 4 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-24T02:29:39.758Z","repository_id":57334616,"created_at":"2025-08-24T02:29:39.758Z","updated_at":"2025-08-24T02:29:39.758Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28833504,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T23:29:49.665Z","status":"online","status_checked_at":"2026-01-28T02:00:06.943Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-28T02:06:39.022Z","updated_at":"2026-01-28T02:06:39.660Z","avatar_url":"https://github.com/taboola.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Mint \u0026middot; [![GitHub license](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0) [![npm version](https://img.shields.io/npm/v/react-mint.svg?style=flat)](https://www.npmjs.com/package/react-mint)\n\nreact-mint is a tooltip library built utilizing React-specific features like portals and context to provide a rich set of features for large applications.\n\n## Usage\n\nInstall react-mint via npm.\n\n    npm install react-mint --save\n\nKeep in mind react-mint has React v16.3 and React DOM v16 as a peer dependency, so your app needs to meet these requirements to use react-mint\n\nRender a TooltipPortal where you want your tooltips to exist in the DOM. This is typically at the top of your app to ensure your tooltips never have to fight other components\nfor a higher z-index.\n\n```jsx\nimport { TooltipPortal } from 'react-mint';\nimport { render } from 'react-dom';\n\nrender(\n  \u003cTooltipPortal\u003e\n    \u003cApp /\u003e\n  \u003c/TooltipPortal\u003e,\n  document.querySelector('#root')\n);\n```\n\nWherever you want to render a tooltip in your app, render a Tooltip component with the contents of the tooltip as the children of the component\n\n```jsx\nimport { Tooltip } from 'react-mint';\nimport React from 'react';\n\n// renders a blue box which will display a tooltip that says Hello! when hovered over\nconst App = () =\u003e (\n  \u003cdiv style={{background: 'blue', width: 200, height: 200}}\u003e\n    \u003cTooltip\u003e\n      Hello!\n    \u003c/Tooltip\u003e\n  \u003c/div\u003e\n)\n```\n\n## Documentation\n\n### `\u003cTooltip\u003e`\n\n**position** : top | right | left | bottom (default: top)\n\nThe direction the tooltip renders. The enums used mirror the ones used for css position.\n\n**duration** : int (default : 300)\n\nThe total duration of the mounting/unmounting animation. If you want to use an animation with varying durations, use the longest time here.\n\n**delay** : int | array([int, int]) (default : 0)\n\nThe delay for the tooltip to show/hide. If just an int is provided, this value will be the show delay only. If a tuple is provided, the first int is the show delay and the second is the hide delay.\n\n**hoverable** : bool (default: true)\n\nControls whether or not hovering over the parent is what triggers the mounting/unmounting of the tooltip\n\n**clickable** : bool (default: false)\n\nControls whether or not clicking the parent is what triggers the mounting/unmounting of the tooltip\n\n**showing** : bool (default: undefined)\n\nControls whether or not the tooltip is mounted. This is useful for providing custom logic to trigger tooltips instead of the built in functionality. Typically you will want to disable hoverable and clickable when using this feature, although this boolean has priority over both of them.\n\n**interactive** : bool (default: false)\n\nControls whether or not the tooltip can be interacted with using the mouse. When set to true, moving the mouse over the tooltip will cause it to remain open so that the user can further interact with it (e.g. clicking buttons inside the tooltip)\n\n**tailHeight** : int (default: 6)\n\nThe height of the tooltip's tail in pixels. A tail height of 0 will hide the tail\n\n**offset** : int (default : 6)\n\nThe vertical spacing between the tooltip tail and the parent element it points to in pixels\n\n**offsetBody** : int (default : 0)\n\nThe horizontal offset that shifts the tooltip tail away from the centered state on the body\n\n**pure** : boolean (default : true)\n\nWhen true, a shallow comparison check is done on the props passed in and if a difference is detected, will cause the component to recompute its position and size. Otherwise, it will do this computation every rerender. This defaults to true because the computation for position and size are expensive and should be minimized, therefore disabling this flag should be used with caution. If you need a state change to resize or reposition a rendered tooltip, simply passing in that property as a prop will accomplish that.\n\n**autoFlip** : boolean (default : true)\n\nTurns on the functionality which causes the tooltip to automatically flip positions (top \u003c-\u003e bottom, left \u003c-\u003e right) when the tooltip hits the edge of the nearest Portal. Typically there will be only one portal which encompasses the entire viewport, so this prop will cause flipping when the tooltip would normally to bleed off the document.\n\n**inline** : boolean (default : false)\n\nControls whether or not the tooltip is rendered at the current location in the DOM. Use this flag if for whatever reason you do not wish to use portals or something constrains you to render the tooltip in the DOM at the same location in the React DOM. Please note, the tooltips utilize absolute positioning so if you use inline, the DOM element wrapping the tooltip should have absolute or relative positioning\nin order to 'capture' the tooltip. This will automatically become true if the tooltip has no ancestor TooltipPortal and an explicit portalId is not given\n\n**style** : object\n\nThe inline style applied to the entire tooltip. You should put styles that need to affect both the box and the tail of the tooltip here, such as backgroundColor and border. Keep in mind if you provide your own style all the defaults will be overwritten.\n\n**boxStyle** : object\n\nThe css inline applied to only the box of the tooltip. Styles such as borderRadius, padding, and color should be applied here. Keep in mind if you provide your own style all the defaults will be overwritten.\n\n**tailStyle** : object\n\nThe inline style applied to only the tail of the tooltip. You typically should not need to apply a style here, but the option is available for the few use cases. Keep in mind if you provide your own style all the defaults will be overwritten.\n\n**getTransitionStyle** : func(entering : bool, duration : int, position: string)\n\nThe function that gets called when the tooltip is mounting or unmounting. This function takes 3 parameters: entering, duration, and position, which you should use to return the proper style for the tooltip. When entering is false, the object should be the initial style or ending style. When entering is true, the object should be the style when the tooltip is in neutral. Refer to the examples for more tips on how to use this.\n\n**Default Styles**\n```jsx\n\u003cTooltip\n  style={{\n    background: '#282828',\n  }}\n  boxStyle={{\n    borderRadius: 4,\n    padding: 8,\n    color: '#fff',\n  }}\n  tailStyle={undefined}\n  getTransitionStyle={(entering) =\u003e ({\n    opacity: entering ? 1 : 0,\n    transitionProperty: 'opacity'\n  })}\n\u003e\n  {children}\n\u003c/Tooltip\u003e\n```\n\n**boxClassName** : string\n\nClass name that gets applied to the box div. If the style is not applying properly, try\nalso applying the style to maskClassName. Styles applied to the box are normally\nprogramatically computed based on passed in styles, so certain styles like background\ncolor may require some trial and error\n\n**maskClassName** : string\n\nClass name that gets applied to a mask that gets rendered. Certain styles like background\ncolor and border radius should be applied additionally on this class, but sizing styles like\npadding should not be applied\n\n**tailClassName** : string\n\nClass name that gets applied to the tail. Typically you just change colors here\n\n**theme** : string (default: undefined)\n\nThe theme that will get applied to the tooltip from the nearest TooltipPortal. Read the TooltipPortal props for more information on theming\n\n**portalId** : string (default: null)\n\nThe element ID of the DOM element you want your tooltip to be rendered at. If using a TooltipPortal, this will be automatically generated for you, otherwise you will need a DOM element as an ancestor to this tooltip with an ID matching portalId. If there is no TooltipPortal and this prop\nis not provided then the tooltip will switch to inline mode\n\n**scrollRef** : React ref (default: undefined)\n\nThe ref of the innermost DOM element that will be scrollable. The tooltip naturally hooks onto this element, but in the event that it hooks onto the wrong element due to stray css properties on earlier\nelements, you can manually pass in the ref as a workaround. This information is necessary to allow the tooltip to follow along when scrolling and to prevent duplication issues\n\n**scrollRefs** : React ref (default: undefined)\nAn array of scrollRefs, each element in the array will be hooked onto\n\n**sourceRef** : React ref (default: undefined)\n\nThe ref of the component you want the tooltip to treat as its 'parent'. Typically you should not use this, as it has niche uses and makes the code hard to understand, but it exists if you need the functionality\n\n**listenToAllParentScrolls** : boolean (default: false)\n\nSet this to true to make the tooltip hook onto all scrollable DOM parents. Normally not useful, but can be helpful when dealing with tooltips that\nexist inside multiple scrollable areas\n\n### `\u003cTooltipPortal\u003e`\n\nTooltipPortals provide two main functionalities: the React portal which all descendant Tooltip components will anchor to and a React provider which will provide themes to descendant Tooltip components. If a tooltip has no ancestor TooltipPortal and a specific portalId is not provided, the tooltip\nwill default to inline\n\n**style** : object\n\nThe style object passed into the enclosing div if you need to pass it styles\n\n**className** : string\n\nThe class name passed into the enclosing div if you need to style/select it\n\n**themes** : object\n\nA map of keys to objects which represent all the props in a theme. For example, a themes object of\n```js\n{\n  default: {\n    style: {\n      background: 'grey',\n    },\n  },\n  night: {\n    duration: 200,\n    style: {\n      background: 'white',\n    }\n  }\n}\n```\n\nmeans that if a descendant tooltip component has the theme prop set to 'night', it will have the duration and style prop set to the appropriate values.\n\n**defaultTheme** : string (default: undefined)\n\nThe theme that all Tooltip descendants will use if no theme prop is explicitly provided.\n\n**portal** : boolean (default: true)\n\nControls whether or not the Portal actually functions as a portal. Set to false if you for whatever reason just need to inject some special themeing without actually setting a new portal location.\n\n\n## Examples\n\nTooltip that enters by fading in and spinning upwards.\n\n```jsx\nimport { Tooltip } from 'react-mint';\nimport React from 'react';\n\nconst App = () =\u003e (\n  \u003cdiv style={{background: 'blue', width: 200, height: 200}}\u003e\n    \u003cTooltip\n      duration={1000}\n      delay={200}\n      getTransitionStyle={(entering) =\u003e ({\n        transitionProperty: 'transform, opacity',\n        transform: `translateY(${entering ? 0 : 20}px) rotate(${entering ? 0 : 360}deg)`,\n        opacity: entering ? 1 : 0,\n      })}\n    \u003e\n      Hello!\n    \u003c/Tooltip\u003e\n  \u003c/div\u003e\n)\n```\n\nLight tooltip theme with box shadow.\n\n```jsx\nimport { TooltipPortal } from 'react-mint';\nimport { render } from 'react-dom';\n\nexport const tooltipThemes = {\n  light: {\n    style: { background: '#fff' },\n    boxStyle: { \n      borderRadius: 4,\n      padding: '8px',\n      color: '#3a4047',\n      boxShadow: '3px 3px 8px 0 rgba(0,0,0,0.25)',\n    },\n    tailStyle: {\n      boxShadow: '3px 0px 8px 0 rgba(0,0,0,0.25)',\n    },\n  }\n}\n\nrender(\n  \u003cTooltipPortal\n    themes={tooltipThemes}\n    defaultTheme={'light'}\n  \u003e\n    \u003cApp /\u003e\n  \u003c/TooltipPortal\u003e,\n  document.querySelector('#root')\n);\n```\n\n### License\n\nReact Mint is [Apache v2 licensed](./LICENSE).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaboola%2Freact-mint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaboola%2Freact-mint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaboola%2Freact-mint/lists"}