diff --git a/.editorconfig b/.editorconfig deleted file mode 100644 index 0215337d1..000000000 --- a/.editorconfig +++ /dev/null @@ -1,25 +0,0 @@ - -# editorconfig.org -root = true - -[*] -charset = utf-8 -indent_style = space -indent_size = 2 -end_of_line = lf -trim_trailing_whitespace = true -insert_final_newline = true -max_line_length = 100 - -[*.md] -max_line_length = 0 -trim_trailing_whitespace = false - -[{*.json, *.svg}] -indent_style = space -indent_size = 2 - -# Matches the exact package.json, or *rc -[{package.json,*.yml,*rc}] -indent_style = space -indent_size = 2 \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 0d1bcba28..000000000 --- a/.eslintrc.json +++ /dev/null @@ -1,95 +0,0 @@ -{ - "extends": [ - "eslint-config-airbnb", - "plugin:import/typescript", - "plugin:@typescript-eslint/recommended", - "prettier", - "plugin:prettier/recommended" - ], - "env": { - "browser": true, - "jest": true - }, - "parser": "@typescript-eslint/parser", - "plugins": ["react", "react-hooks", "prettier", "@typescript-eslint"], - "settings": { - "import/resolver": { - "node": { - "extensions": [".js", ".jsx", ".ts", ".tsx"], - "moduleDirectory": ["node_modules", "src/"] - } - } - }, - "rules": { - "operator-linebreak": [ - 2, - "after", - { - "overrides": { - "?": "before", - ":": "before" - } - } - ], - "object-curly-newline": 0, - "implicit-arrow-linebreak": 0, - "semi": ["error", "never"], - "quotes": [ - "error", - "single", - { - "allowTemplateLiterals": true, - "avoidEscape": true - } - ], - "max-len": [ - "error", - { - "code": 100, - "ignoreStrings": true, - "ignoreTemplateLiterals": true - } - ], - "import/no-extraneous-dependencies": [ - "error", - { - "devDependencies": true - } - ], - "import/no-unresolved": [ - "error", - { - "commonjs": true, - "amd": true - } - ], - "react/jsx-filename-extension": ["off"], - "react/prop-types": ["warn"], - "react/button-has-type": 0, - "jsx-a11y/href-no-hash": "off", - "jsx-a11y/label-has-for": [ - "error", - { - "allowChildren": true - } - ], - "jsx-a11y/anchor-is-valid": [ - "error", - { - "specialLink": ["to"] - } - ], - "react/jsx-props-no-spreading": 0, - "react/react-in-jsx-scope": "off", - "prettier/prettier": "error", - "import/extensions": 0, - "@typescript-eslint/no-unused-vars": "error", - "@typescript-eslint/no-explicit-any": "warn", - "import/prefer-default-export": "off", - "react/function-component-definition": "off", - "@typescript-eslint/ban-ts-comment": "off", - "dot-notation": "off", - "no-shadow": "off", - "@typescript-eslint/no-shadow": "error" - } -} diff --git a/.gitattributes b/.gitattributes deleted file mode 100644 index 879bcf843..000000000 --- a/.gitattributes +++ /dev/null @@ -1,3 +0,0 @@ -# do not show lock files while doing git diff -package-lock.json -diff -yarn.lock -diff \ No newline at end of file diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml deleted file mode 100644 index f9b02f6e5..000000000 --- a/.github/FUNDING.yml +++ /dev/null @@ -1,13 +0,0 @@ -# These are supported funding model platforms - -github: [gabrieljablonski, danielbarion] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] -patreon: # Replace with a single Patreon username -open_collective: # Replace with a single Open Collective username -ko_fi: # Replace with a single Ko-fi username -tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel -community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry -liberapay: # Replace with a single Liberapay username -issuehunt: # Replace with a single IssueHunt username -otechie: # Replace with a single Otechie username -lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry -custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md deleted file mode 100644 index 4f0d5828e..000000000 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -name: Bug report -about: Create a report to help us improve. Please check our troubleshooting docs beforehand. -title: "[BUG]" -labels: Bug -assignees: '' - ---- - -# Check the troubleshooting page before opening an issue! - -Make sure your problem isn't already covered at the troubleshooting page: https://react-tooltip.com/docs/troubleshooting - ----- - -**Bug description** -A clear and concise description of what the bug is. - -**Version of Package** -vX.X.X - -**To Reproduce** -Steps to reproduce the behavior. - -**Expected behavior** -A clear and concise description of what you expected to happen. - -**Screenshots** -If applicable, add screenshots to help explain your problem. - -**Desktop (please complete the following information if possible or delete this section):** - - OS: [e.g. iOS] - - Browser [e.g. chrome, safari] - - Version [e.g. 22] - - Frameworks [e.g. React 18, Next.js 13] - -**Smartphone (please complete the following information if possible or delete this section):** - - Device: [e.g. iPhone6] - - OS: [e.g. iOS8.1] - - Browser [e.g. stock browser, safari] - - Version [e.g. 22] - - Frameworks [e.g. React 18, Next.js 13] - -**Additional context** -Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md deleted file mode 100644 index 4583c24fc..000000000 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -name: Feature request -about: Suggest an idea for this project -title: "[FEAT REQ]" -labels: Feature Request -assignees: '' - ---- - -**Is your feature request related to a problem? Please describe.** -A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] - -**Describe the solution you'd like** -A clear and concise description of what you want to happen. - -**Describe alternatives you've considered** -A clear and concise description of any alternative solutions or features you've considered. - -**Additional context** -Add any other context or screenshots about the feature request here. diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md deleted file mode 100644 index a253f5edb..000000000 --- a/.github/ISSUE_TEMPLATE/question.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -name: Question -about: Feel free to add any relevant information -title: '' -labels: Question -assignees: '' - ---- - -If this is a bug or a Feature request reported using this template, we will close this issue, for those, please use the correct template. - -This will be handled as a Question. diff --git a/.github/workflows/beta-release.yaml b/.github/workflows/beta-release.yaml deleted file mode 100644 index 33df04daa..000000000 --- a/.github/workflows/beta-release.yaml +++ /dev/null @@ -1,63 +0,0 @@ -name: Beta Release - -on: - workflow_call: - -jobs: - beta_release: - runs-on: ubuntu-latest - env: - NPM_TOKEN: ${{ secrets.NPM_TOKEN }} - NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} - steps: - - uses: actions/checkout@v4 - with: - ref: ${{ github.head_ref }} - - uses: actions/setup-node@v4 - with: - node-version: '16.x' - registry-url: 'https://registry.npmjs.org' - cache: 'yarn' - - - name: Install dev dependencies - run: yarn install - - - name: Setup npm credentials file - run: echo "//registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN" >> .npmrc - - - name: Setup git credentials - run: | - git config --global user.name 'Auto Release Bot' - git config --global user.email 'auto-release-bot@users.noreply.github.com' - - - name: Get current package.json version - run: echo "PACKAGE_VERSION=$(npm pkg get version)" >> $GITHUB_ENV - - - name: Setup Beta Release Version - run: node beta-release.js --issue $GITHUB_PR_NUMBER - env: - GITHUB_PR_NUMBER: ${{ github.event.pull_request.number }} - - - name: Release a new beta version - run: npm publish --tag beta - env: - NPM_TOKEN: ${{ secrets.NPM_TOKEN }} - - - uses: actions/github-script@v6 - with: - script: | - github.rest.issues.createComment({ - issue_number: context.issue.number, - owner: context.repo.owner, - repo: context.repo.repo, - body: `Beta version released with the last commit 🚀 - - \`\`\` - yarn add react-tooltip@${{ env.NEW_VERSION }} - \`\`\` - or - \`\`\` - npm install react-tooltip@${{ env.NEW_VERSION }} - \`\`\` - ` - }) diff --git a/.github/workflows/bundlesize.yaml b/.github/workflows/bundlesize.yaml deleted file mode 100644 index 4ece4d9b3..000000000 --- a/.github/workflows/bundlesize.yaml +++ /dev/null @@ -1,20 +0,0 @@ -name: Bundlesize - -on: - workflow_call: - -jobs: - bundlesize: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - - - name: Install dev dependencies - run: yarn install - - - name: Build ReactTooltip component package - run: yarn build - - - name: Bundlesize - run: yarn run bundlesize diff --git a/.github/workflows/lint.yaml b/.github/workflows/lint.yaml deleted file mode 100644 index 4ab3bb3fa..000000000 --- a/.github/workflows/lint.yaml +++ /dev/null @@ -1,35 +0,0 @@ -name: Lint - -on: - workflow_call: - -jobs: - lint: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - - - name: Install dev dependencies - run: yarn install - - - name: ESLint - run: yarn run eslint - - test: - needs: lint - strategy: - matrix: - version: [16, 18, 20] - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - with: - node-version: ${{ matrix.version }} - - - name: Install dev dependencies - run: yarn install - - - name: Run tests - run: yarn run test diff --git a/.github/workflows/pull-request.yaml b/.github/workflows/pull-request.yaml deleted file mode 100644 index 8790539f0..000000000 --- a/.github/workflows/pull-request.yaml +++ /dev/null @@ -1,29 +0,0 @@ -name: Pull request workflow - -on: - push: - branches: - - '!master' - pull_request: - types: [opened, synchronize, reopened, ready_for_review] - -jobs: - lint: - if: 'github.event.pull_request.draft == false' - uses: ./.github/workflows/lint.yaml - - bundlesize: - if: 'github.event.pull_request.draft == false' - uses: ./.github/workflows/bundlesize.yaml - - beta_release: - uses: ./.github/workflows/beta-release.yaml - # allow the children job to have access to the secrets of the repository - secrets: inherit - - fail_if_pull_request_is_draft: - if: github.event.pull_request.draft == true - runs-on: ubuntu-18.04 - steps: - - name: Fails in order to indicate that pull request needs to be marked as ready to review and unit tests workflow needs to pass. - run: exit 1 diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml deleted file mode 100644 index 2caace2f6..000000000 --- a/.github/workflows/stale.yml +++ /dev/null @@ -1,32 +0,0 @@ -# This workflow warns and then closes issues and PRs that have had no activity for a specified amount of time. -# -# You can adjust the behavior by modifying this file. -# For more information, see: -# https://github.com/actions/stale -name: Mark stale issues and pull requests - -on: - schedule: - - cron: '00 12 * * *' - -jobs: - stale: - runs-on: ubuntu-latest - permissions: - issues: write - pull-requests: write - - steps: - - uses: actions/stale@v5 - with: - repo-token: ${{ secrets.GITHUB_TOKEN }} - days-before-issue-stale: 90 - days-before-issue-close: 30 - days-before-pr-stale: 90 - days-before-pr-close: 30 - stale-issue-message: 'This issue is stale because it has not seen activity in 30 days. Remove the `stale` label or comment within 14 days, or it will be closed.' - stale-pr-message: 'This pull request is stale because it has not seen activity in 30 days. Remove the `stale` label or comment within 14 days, or it will be closed.' - stale-issue-label: 'stale' - stale-pr-label: 'stale' - exempt-issue-labels: 'help-wanted,v6' - exempt-pr-labels: 'help-wanted,v6' diff --git a/.gitignore b/.gitignore deleted file mode 100644 index d25d1a3f0..000000000 --- a/.gitignore +++ /dev/null @@ -1,41 +0,0 @@ -## editors -/.idea - -## system files -.DS_Store -.idea/ -*.log -.vscode/ -## npm -/node_modules/ -/npm-debug.log -.npmrc - -## testing -/coverage/ - -## bower -/bower_components*/ -/bower-*.json - -## temp folders -/.tmp/ - -## demoing -/demo/ - -## building -/build/ -/dist/ - -## other -yarn-error.log - -# push to github -!.babelrc -!.gitignore -!.npmignore - -# yalc -/.yalc - diff --git a/.husky/.gitignore b/.husky/.gitignore deleted file mode 100644 index 31354ec13..000000000 --- a/.husky/.gitignore +++ /dev/null @@ -1 +0,0 @@ -_ diff --git a/.husky/pre-commit b/.husky/pre-commit deleted file mode 100755 index ccb1b37c6..000000000 --- a/.husky/pre-commit +++ /dev/null @@ -1,6 +0,0 @@ -#!/bin/sh -. "$(dirname "$0")/_/husky.sh" - -npm run eslint -# npm run stylelint -npm run prettier diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 79d4a6c89..000000000 --- a/.npmignore +++ /dev/null @@ -1,50 +0,0 @@ -// system file -*.log -.DS_Store* -.idea/ - -// specific files -node_modules/ -example/ -example-v5/ -build/ -test/ -bin/ -CHANGELOG.md -src/ -docs/ -public/ -coverage/ - -// setting files -.babelrc -.travis.yml -.editorconfig - -// misc folders -.vscode/ -.husky/ -.github/ -rollup-plugins/ - -// misc files -bundlesize.config.json -prebuild.js -jest.config.ts - -// bundler - rollup -rollup.config.dev.js -rollup.config.prod.js -rollup.config.types.js - -// bundler - esbuild -esbuild.config.dev.mjs -esbuild.config.prod.mjs - -// unused configs -.eslintrc.json -.gitattributes -.prettierrc.json -.stylelintrc.json -beta-release.js -tsconfig.json diff --git a/.prettierrc.json b/.prettierrc.json deleted file mode 100644 index 84521b01b..000000000 --- a/.prettierrc.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "semi": false, - "arrowParens": "always", - "proseWrap": "preserve", - "singleQuote": true, - "trailingComma": "all", - "tabWidth": 2, - "printWidth": 100, - "endOfLine": "auto" -} diff --git a/.stylelintrc.json b/.stylelintrc.json deleted file mode 100644 index bd4672be6..000000000 --- a/.stylelintrc.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "extends": ["stylelint-config-standard", "stylelint-config-prettier"], - "rules": { - "declaration-no-important": true, - "declaration-colon-newline-after": null, - "selector-pseudo-class-no-unknown": [ - true, - { - "ignorePseudoClasses": ["global"] - } - ], - "selector-pseudo-element-no-unknown": [ - true, - { - "ignorePseudoElements": ["global"] - } - ] - } -} \ No newline at end of file diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index fc73037b9..000000000 --- a/.travis.yml +++ /dev/null @@ -1,40 +0,0 @@ -language: node_js -cache: - directories: - - node_modules -node_js: - - 12 -notifications: - email: - recipients: - - aron.helser@kitware.com - on_success: change - on_failure: always -install: - - yarn - -script: - - yarn build - - git config --global user.name "Travis CI" - - git config --global user.email "aron.helser@kitware.com" - - cd example - - yarn - - yarn build - - cd .. - - commitlint-travis - -after_success: - - yarn semantic-release - -deploy: - provider: pages - local_dir: example/build - skip_cleanup: true - token: $GH_TOKEN - keep_history: true - on: - branch: master - -branches: - except: - - "/^v\\d+\\.\\d+\\.\\d+$/" diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100755 index 8e5566860..000000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,436 +0,0 @@ -# This CHANGELOG is related to version 4 of ReactTooltip - -We created the entire project from scratch to build v5, the flow was changed and now the changelog of version 5 is in [Github Releases](https://github.com/ReactTooltip/react-tooltip/releases). - -## [4.5.1](https://github.com/ReactTooltip/react-tooltip/compare/v4.5.0...v4.5.1) (2022-11-23) - -### Bug Fixes - -- Fixed tooltip arrow center position ([13f6e75](https://github.com/ReactTooltip/react-tooltip/commit/13f6e75053267a27e1480faaef98caa86c561d6d)) - -# [4.5.0](https://github.com/ReactTooltip/react-tooltip/compare/v4.4.5...v4.5.0) (2022-11-09) - -### Features - -- add disable internal style prop into react-tooltip.d.ts as feat to trigger semantic-release ([ce41c47](https://github.com/ReactTooltip/react-tooltip/commit/ce41c479c2532a01afbcd4250a523dbeaa014672)), closes [#811](https://github.com/ReactTooltip/react-tooltip/issues/811) - -## [4.4.5](https://github.com/ReactTooltip/react-tooltip/compare/v4.4.4...v4.4.5) (2022-11-09) - -### Bug Fixes - -- add padding into the ts type file ([365c2da](https://github.com/ReactTooltip/react-tooltip/commit/365c2dad98d15ecd32356c05ee962225fa018b06)), closes [#817](https://github.com/ReactTooltip/react-tooltip/issues/817) [#808](https://github.com/ReactTooltip/react-tooltip/issues/808) - -## [4.4.4](https://github.com/ReactTooltip/react-tooltip/compare/v4.4.3...v4.4.4) (2022-11-09) - -### Bug Fixes - -- Fixed the tooltip arrow overlapping tooltip content ([51c7e1a](https://github.com/ReactTooltip/react-tooltip/commit/51c7e1a854c80ea545c22edb403e831d0941d8f9)) - -## [4.4.3](https://github.com/ReactTooltip/react-tooltip/compare/v4.4.2...v4.4.3) (2022-10-22) - -### Bug Fixes - -- use double quotes instead of single quotes in sass ([b19ebcb](https://github.com/ReactTooltip/react-tooltip/commit/b19ebcb4cc30e6702e10539b96676ef33050fe03)) -- use double quotes instead of single quotes in sass ([1f776ac](https://github.com/ReactTooltip/react-tooltip/commit/1f776aca75ac80705aad74d9ee6f1dd63617fcf5)) - -## [4.4.2](https://github.com/ReactTooltip/react-tooltip/compare/v4.4.1...v4.4.2) (2022-10-18) - -### Bug Fixes - -- revert the flow to do a release from master branch ([03b7c4e](https://github.com/ReactTooltip/react-tooltip/commit/03b7c4e72d21cfed9c2fcce8702dd53ef3cc4960)) - -# [4.4.0](https://github.com/ReactTooltip/react-tooltip/compare/v4.3.1...v4.4.0) (2022-10-13) - -### Features - -- add borderClass prop to allow a custom border class ([2eec877](https://github.com/ReactTooltip/react-tooltip/commit/2eec8775d30a533e028b3a6b5bca90856f193060)) -- add borderClass prop to allow a custom border class [skip-ci] ([9844a6c](https://github.com/ReactTooltip/react-tooltip/commit/9844a6ce5a9ce549b72b4ab0700394adeb009ed2)) - -### Reverts - -- revert the upgrade in uuid as it was breaking the examples page ([71afd00](https://github.com/ReactTooltip/react-tooltip/commit/71afd0045fe3ab4127bd120900a453f17dc4ad4b)) - -## [4.3.1](https://github.com/ReactTooltip/react-tooltip/compare/v4.3.0...v4.3.1) (2022-10-13) - -### Bug Fixes - -- add validation before call callbackAfter function as function ([aae936e](https://github.com/ReactTooltip/react-tooltip/commit/aae936e2f7a820cf1edcb68927b8973051dae9c2)) - -# [4.3.0](https://github.com/wwayne/react-tooltip/compare/v4.2.21...v4.3.0) (2022-10-12) - -### Bug Fixes - -- #759 (https://github.com/wwayne/react-tooltip/issues/759) - Disable tooltip when disable prop changes (8e9cca0 (https://github.com/wwayne/react-tooltip/commit/8e9cca016f8eb59036c0c4623b85bf3f465ba262)) -- \*aftershow: call afterShow only after state has fully updated (54752e8 (https://github.com/wwayne/react-tooltip/commit/54752e81093f4c41bae1b49f7de65f28cf54df1a)) -- effect and type not properly applied at first render (a8d0e51 (https://github.com/wwayne/react-tooltip/commit/a8d0e51dd5dc0eb85d985232da90d54fd031ae4b)) -- getposition: no error when all placements outside (249b925 (https://github.com/wwayne/react-tooltip/commit/249b925a30ac2e7f04648a20bc9976e85358205b)) -- performance issue caused by excessive use of clearTimeout/Interval (22aea50 (https://github.com/wwayne/react-tooltip/commit/22aea5086db47727feae609bb7a6f8e269b7f2de)) -- **react18: tip not hiding with React 18 StrictMode enabled** (83b72c6 (https://github.com/wwayne/react-tooltip/commit/83b72c63ea9fe527bcbfb0b85414527e172c970b)) -- set aria-describedby value wrong when custom id (a04d26c (https://github.com/wwayne/react-tooltip/commit/a04d26cc0639054b474ca8b373c95a09b199973a)) - -### Features - -- component: adding "padding" property to customize padding style (9ae765a (https://github.com/wwayne/react-tooltip/commit/9ae765a3cc38b36ce5ea77edd8fcc0f7bd9646a6)) -- getposition: support desired-place-list (by priority) (982d89d (https://github.com/wwayne/react-tooltip/commit/982d89d2b9d663ed92d41743f63069d0c8a4aac0)) -- parent_body_mode: #535 (https://github.com/wwayne/react-tooltip/issues/535) search parents for data-tip if in body mode (71da348 (https://github.com/wwayne/react-tooltip/commit/71da34870163c4377a82b009ac63692e34eeb444)) -- pencil: readme updated to trigger next minor release (react 18 support release) (bb9c79e (https://github.com/wwayne/react-tooltip/commit/bb9c79e248918e4b0641b9305752e59019a60a72)) -- pencil: readme updated to trigger next minor release (react 18 support release) (3a6ec6c (https://github.com/wwayne/react-tooltip/commit/3a6ec6c1a1c61434532a9350e7ceafe17e8794b9)) - -# [4.2.21](https://github.com/wwayne/react-tooltip/compare/v4.2.20...v4.2.21) (2021-05-28) - -### Bug Fixes - -- **compability:** add polyfill and change styles ([#706](https://github.com/wwayne/react-tooltip/issues/706)) ([b6e9a1c](https://github.com/wwayne/react-tooltip/commit/b6e9a1c)) - -## [4.2.20](https://github.com/wwayne/react-tooltip/compare/v4.2.19...v4.2.20) (2021-05-28) - -### Bug Fixes - -- add aria hidden attribute to style tag ([#703](https://github.com/wwayne/react-tooltip/issues/703)) ([d60c2b7](https://github.com/wwayne/react-tooltip/commit/d60c2b7)) - -## [4.2.19](https://github.com/wwayne/react-tooltip/compare/v4.2.18...v4.2.19) (2021-05-06) - -### Bug Fixes - -- **src/index.js:** hide tooltip if blurred (tabbed out) ([#699](https://github.com/wwayne/react-tooltip/issues/699)) ([e0a2a1d](https://github.com/wwayne/react-tooltip/commit/e0a2a1d)) - -## [4.2.18](https://github.com/wwayne/react-tooltip/compare/v4.2.17...v4.2.18) (2021-04-25) - -### Bug Fixes - -- **src/index.js:** add accessibility support for tabbing ([#695](https://github.com/wwayne/react-tooltip/issues/695)) ([ae936a5](https://github.com/wwayne/react-tooltip/commit/ae936a5)) - -## [4.2.17](https://github.com/wwayne/react-tooltip/compare/v4.2.16...v4.2.17) (2021-03-26) - -### Bug Fixes - -- **type:** added role property to types ([#679](https://github.com/wwayne/react-tooltip/issues/679)) ([9b49395](https://github.com/wwayne/react-tooltip/commit/9b49395)) - -## [4.2.16](https://github.com/wwayne/react-tooltip/compare/v4.2.15...v4.2.16) (2021-03-26) - -### Bug Fixes - -- **index.js:** fix exception when testing with Jest ([#682](https://github.com/wwayne/react-tooltip/issues/682)) ([f885f1f](https://github.com/wwayne/react-tooltip/commit/f885f1f)) - -## [4.2.15](https://github.com/wwayne/react-tooltip/compare/v4.2.14...v4.2.15) (2021-02-26) - -### Bug Fixes - -- do not delay show if tooltip is already shown ([#676](https://github.com/wwayne/react-tooltip/issues/676)) ([e8b9d84](https://github.com/wwayne/react-tooltip/commit/e8b9d84)) - -## [4.2.14](https://github.com/wwayne/react-tooltip/compare/v4.2.13...v4.2.14) (2021-02-16) - -### Bug Fixes - -- **styles:** change style injection way ([#668](https://github.com/wwayne/react-tooltip/issues/668)) ([1e10cce](https://github.com/wwayne/react-tooltip/commit/1e10cce)), closes [#650](https://github.com/wwayne/react-tooltip/issues/650) - -## [4.2.13](https://github.com/wwayne/react-tooltip/compare/v4.2.12...v4.2.13) (2021-01-15) - -### Bug Fixes - -- **domexception:** revert previous changed for unexpected behavior ([85e38bb](https://github.com/wwayne/react-tooltip/commit/85e38bb)), closes [#667](https://github.com/wwayne/react-tooltip/issues/667) - -## [4.2.12](https://github.com/wwayne/react-tooltip/compare/v4.2.11...v4.2.12) (2021-01-14) - -### Bug Fixes - -- **style injection:** change style injection default root ([a00c5b7](https://github.com/wwayne/react-tooltip/commit/a00c5b7)), closes [#665](https://github.com/wwayne/react-tooltip/issues/665) - -## [4.2.11](https://github.com/wwayne/react-tooltip/compare/v4.2.10...v4.2.11) (2020-11-22) - -### Bug Fixes - -- **styles:** add styles for shadow dom ([00d1539](https://github.com/wwayne/react-tooltip/commit/00d1539)), closes [#597](https://github.com/wwayne/react-tooltip/issues/597) - -## [4.2.10](https://github.com/wwayne/react-tooltip/compare/v4.2.9...v4.2.10) (2020-09-14) - -### Bug Fixes - -- **build:** removing single quotes on cpy for windows shell ([#632](https://github.com/wwayne/react-tooltip/issues/632)) ([9c280af](https://github.com/wwayne/react-tooltip/commit/9c280af)) - -## [4.2.9](https://github.com/wwayne/react-tooltip/compare/v4.2.8...v4.2.9) (2020-08-27) - -### Bug Fixes - -- **getposition:** properly determine parents with will-change: transform ([3a76250](https://github.com/wwayne/react-tooltip/commit/3a76250)) - -## [4.2.8](https://github.com/wwayne/react-tooltip/compare/v4.2.7...v4.2.8) (2020-08-06) - -### Bug Fixes - -- **showtooltip:** check if tooltipRef is undefined ([#623](https://github.com/wwayne/react-tooltip/issues/623)) ([f63eab2](https://github.com/wwayne/react-tooltip/commit/f63eab2)) - -## Change Log - -### v3.9.0 (2018/11/07 00:43 +00:00) - -- [#452](https://github.com/wwayne/react-tooltip/pull/452) docs(README.md): Updates demo url (@tjFogarty) -- [#439](https://github.com/wwayne/react-tooltip/pull/439) added support for passing options to sanitizeHtml (@icheishvili) -- [#433](https://github.com/wwayne/react-tooltip/pull/433) Use capture mode with globalEventOff (@apandichi) - -### v3.8.4 (2018/09/12 18:00 +00:00) - -- [#428](https://github.com/wwayne/react-tooltip/pull/428) fix(example):

warning from react, make text match code. (@aronhelser) - -### v3.8.3 (2018/09/12 13:47 +00:00) - -- [#426](https://github.com/wwayne/react-tooltip/pull/426) perf(Use sanitize-html-react instead of sanitize-html) (@jgerlier) -- [#425](https://github.com/wwayne/react-tooltip/pull/425) fix(index.js): fix state initialization (@MtBlue81) - -### v3.8.2 (2018/09/11 17:55 +00:00) - -- [#413](https://github.com/wwayne/react-tooltip/pull/413) fix(index.js): Use correct orientation when mouse enters (@an4ger) - -### v3.8.1 (2018/09/06 14:07 +00:00) - -- [#422](https://github.com/wwayne/react-tooltip/pull/422) fix(tooltip): sanitize HTML to prevent XSS (@wichniowski) - -### v3.7.0 (2018/09/03 15:13 +00:00) - -- [#416](https://github.com/wwayne/react-tooltip/pull/416) feat(mouseover): Add ability to hover on tooltip. (@RobertGary1) -- [#414](https://github.com/wwayne/react-tooltip/pull/414) Fixed jsdoc return typos (@AlexanderEllis) -- [#399](https://github.com/wwayne/react-tooltip/pull/399) Fixes Typos (@jstettner) -- [#391](https://github.com/wwayne/react-tooltip/pull/391) fix(positioning): make sure tooltip is oriented correctly when close to edge (@hassanbot) - -### v3.6.1 (2018/06/05 13:46 +00:00) - -- [#389](https://github.com/wwayne/react-tooltip/pull/389) fix(isCapture): guard use of currentTarget (@aronhelser) -- [#384](https://github.com/wwayne/react-tooltip/pull/384) Detach custom event listener (@P0lip) - -### v3.6.0 (2018/05/15 18:03 +00:00) - -- [#360](https://github.com/wwayne/react-tooltip/pull/360) Compute or enrich tip content (@austil) - -### v3.5.1 (2018/05/03 18:11 +00:00) - -- [#380](https://github.com/wwayne/react-tooltip/pull/380) fix(examples): add SVG example (@P0lip) -- [#379](https://github.com/wwayne/react-tooltip/pull/379) ci(gh-pages): Allow travis to publish new examples to github (@aronhelser) -- [#366](https://github.com/wwayne/react-tooltip/pull/366) Make getPosition() calculate offsets correctly for svg elements (@P0lip) -- [#310](https://github.com/wwayne/react-tooltip/pull/310) Update position with content (@stefanhayden) -- [#368](https://github.com/wwayne/react-tooltip/pull/368) Fix issue where tooltip won't show for adjacent elements. (@tishihar94) -- [#376](https://github.com/wwayne/react-tooltip/pull/376) Add displayName (@clehnert-psl) -- [#375](https://github.com/wwayne/react-tooltip/pull/375) test(scrolling): Add example showing tooltip inside scrolling div (@aronhelser) - -### v3.5.0 (2018/04/11 18:04 +00:00) - -- [#281](https://github.com/wwayne/react-tooltip/pull/281) Get tooltip content dynamically in the render method (@alfonsomunozpomer) - -### v3.4.3 (2018/04/11 15:14 +00:00) - -- [#207](https://github.com/wwayne/react-tooltip/pull/207) Return tooltip to original position when possible (@hassanbot) -- [#301](https://github.com/wwayne/react-tooltip/pull/301) insert css as first to allow easy css styling without important (@roblan) - -### 3.4.2 (2018/04/09 18:58 +00:00) - -- [#373](https://github.com/wwayne/react-tooltip/pull/373) fix(example): 'made dev' works again, small fixes. (@aronhelser) -- [#337](https://github.com/wwayne/react-tooltip/pull/337) Fix README show tip usage error (@sivagao) -- [#359](https://github.com/wwayne/react-tooltip/pull/359) License should use H2 as the previous sections do (@konekoya) - -### 3.4.1 (2018/04/05 17:24 +00:00) - -- [#369](https://github.com/wwayne/react-tooltip/pull/369) fix(index.js): add missing argument so tooltip hides. (@aronhelser) -- [#372](https://github.com/wwayne/react-tooltip/pull/372) Travis: update node version to fix travis build. (@aronhelser) - -### 3.4.0 (2017/10/16 13:39 +00:00) - -- [#321](https://github.com/wwayne/react-tooltip/pull/321) React 16 support (@mikecousins) - -### 3.3.1 (2017/10/05 05:08 +00:00) - -- [#292](https://github.com/wwayne/react-tooltip/pull/292) Fix typo (@piperchester) - -### 3.3.0 (2017/04/14 03:34 +00:00) - -- [#287](https://github.com/wwayne/react-tooltip/pull/287) Use prop-types package instead of React.PropTypes (@ssilve1989) - -### 3.2.10 (2017/03/28 20:41 +00:00) - -- [#278](https://github.com/wwayne/react-tooltip/pull/278) Make MutationObserver-based removal tracking (@huumanoid) -- [#272](https://github.com/wwayne/react-tooltip/pull/272) Fix wrapper tag (@huumanoid) -- [#259](https://github.com/wwayne/react-tooltip/pull/259) Track removal of DOM elements (@antoniogiordano) -- [#270](https://github.com/wwayne/react-tooltip/pull/270) Fix typos and improve for clarity (@theholla) - -### 3.2.9 (2017/03/20 15:41 +00:00) - -- [#236](https://github.com/wwayne/react-tooltip/pull/236) escape backslash in getTargetArray method (@rnons) - -### 3.2.7 (2017/02/17 07:24 +00:00) - -- [#262](https://github.com/wwayne/react-tooltip/pull/262) Fix nodelist converte in safari (@wwayne) -- [#260](https://github.com/wwayne/react-tooltip/pull/260) Fix NodeList to Array convertion (@huumanoid) - -### 3.2.6 (2017/02/08 12:34 +00:00) - -- [#255](https://github.com/wwayne/react-tooltip/pull/255) (fix) Remove console logs (@flexpert) -- [#254](https://github.com/wwayne/react-tooltip/pull/254) Add support for className prop (@jonbeller) - -### 3.2.4 (2017/02/07 03:57 +00:00) - -- [#251](https://github.com/wwayne/react-tooltip/pull/251) Dropfen dynamic wrapper (@dropfen) - -### 3.2.3 (2017/01/30 03:00 +00:00) - -- [#247](https://github.com/wwayne/react-tooltip/pull/247) Fix delayHide issue #246 (@huumanoid) -- [#238](https://github.com/wwayne/react-tooltip/pull/238) Update README.md (@nikbelikov) -- [#233](https://github.com/wwayne/react-tooltip/pull/233) Added more syntax highlighting (@oyeanuj) -- [#229](https://github.com/wwayne/react-tooltip/pull/229) Replaced Object.keys(...) by Object.getOwnPropertyNames(...) (@gauthierj) - -### 3.2.2 (2016/11/23 08:23 +00:00) - -- [#220](https://github.com/wwayne/react-tooltip/pull/220) Use parameter 'useCapture' for remove listener if it is registered as… (@achernetsky) -- [#223](https://github.com/wwayne/react-tooltip/pull/223) Fix/security csp style src (@briantrice) -- [#216](https://github.com/wwayne/react-tooltip/pull/216) Fix fire of global show event for IE (@SubVersive) - -### 3.2.1 (2016/09/30 09:51 +00:00) - -- [#202](https://github.com/wwayne/react-tooltip/pull/202) Hide tooltip when getContent return null or undefined, same for empty… (@wwayne) -- [#201](https://github.com/wwayne/react-tooltip/pull/201) Hide tooltip if the tip is empty or disabled (@wwayne) - -### 3.2.0 (2016/09/30 01:10 +00:00) - -- [#200](https://github.com/wwayne/react-tooltip/pull/200) Remove countTransform because the way of transform calculation is cha… (@wwayne) -- [#195](https://github.com/wwayne/react-tooltip/pull/195) Use node parent when calculating offset (@iamdoron) - -### 3.1.8 (2016/09/14 13:37 +00:00) - -- [#194](https://github.com/wwayne/react-tooltip/pull/194) Add resizeHide option (@wwayne) -- [#193](https://github.com/wwayne/react-tooltip/pull/193) hide specific tooltip (@wwayne) -- [#192](https://github.com/wwayne/react-tooltip/pull/192) Create scroll hide option (@wwayne) - -### 3.1.7 (2016/09/07 00:46 +00:00) - -- [#187](https://github.com/wwayne/react-tooltip/pull/187) Add disable option (@wwayne) -- [#183](https://github.com/wwayne/react-tooltip/pull/183) Remove react-dom from Bower dependencies (@mikkopiu) - -### 3.1.6 (2016/08/19 02:07 +00:00) - -- [#181](https://github.com/wwayne/react-tooltip/pull/181) Judge if the component has been mounted mount in getContent #180 (@wwayne) -- [#179](https://github.com/wwayne/react-tooltip/pull/179) Add bower.json (@mikkopiu) - -### 3.1.5 (2016/08/04 10:43 +00:00) - -- [#176](https://github.com/wwayne/react-tooltip/pull/176) Support ReactTooltip.show() #47 (@wwayne) -- [#174](https://github.com/wwayne/react-tooltip/pull/174) Factor transform in css into position calculation #152 (@wwayne) - -### 3.1.4 (2016/08/03 13:52 +00:00) - -- [#173](https://github.com/wwayne/react-tooltip/pull/173) Add new attribute afterShow and afterHide (@wwayne) -- [#172](https://github.com/wwayne/react-tooltip/pull/172) Add support for aria- and role props #159 (@wwayne) - -### 3.1.3 (2016/08/01 23:53 +00:00) - -- [#164](https://github.com/wwayne/react-tooltip/pull/164) Fix for delayShwo #163 (@wwayne) - -### 3.1.2 (2016/07/30 01:38 +00:00) - -- [#162](https://github.com/wwayne/react-tooltip/pull/162) Fix for #158, getposition error (@wwayne) - -### 3.1.1 (2016/07/27 13:03 +00:00) - -- [#151](https://github.com/wwayne/react-tooltip/pull/151) Update postion calculation so that it can calculate continous tootlip (@wwayne) - -### 3.1.0 (2016/07/27 08:49 +00:00) - -- [#149](https://github.com/wwayne/react-tooltip/pull/149) Update algorithm for get positon to fix the shake problem #146 (@wwayne) -- [#145](https://github.com/wwayne/react-tooltip/pull/145) fix typo (@meandavejustice) - -### 3.0.13 (2016/07/14 09:53 +00:00) - -- [#136](https://github.com/wwayne/react-tooltip/pull/136) Check if current element is under transform (@CremaFR) -- [#135](https://github.com/wwayne/react-tooltip/pull/135) Transform 3d (@wwayne) - -### 3.0.10 (2016/07/12 00:28 +00:00) - -- [#132](https://github.com/wwayne/react-tooltip/pull/132) Make getContent to support dynamical generate content while hover (@wwayne) -- [#131](https://github.com/wwayne/react-tooltip/pull/131) Add possibility to recalculate content on show tooltip (@pokidovea) -- [#128](https://github.com/wwayne/react-tooltip/pull/128) Correct Typos in README.md (@gottsohn) - -### 3.0.7 (2016/06/24 13:58 +00:00) - -- [#124](https://github.com/wwayne/react-tooltip/pull/124) Consider both vertical and horizontal into place re-calculation (@wwayne) - -### 3.0.6 (2016/06/23 01:08 +00:00) - -- [#122](https://github.com/wwayne/react-tooltip/pull/122) Fixed "Wrong query selector for data-tip #121" (@neciu) - -### 3.0.5 (2016/06/21 00:32 +00:00) - -- [#120](https://github.com/wwayne/react-tooltip/pull/120) Fix custom event with specific id (@wwayne) - -### 3.0.4 (2016/06/17 10:28 +00:00) - -- [#117](https://github.com/wwayne/react-tooltip/pull/117) Improve deploy process (@wwayne) - -### 3.0.0 (2016/06/16 12:39 +00:00) - -- [#115](https://github.com/wwayne/react-tooltip/pull/115) Improve structure (@wwayne) -- [#106](https://github.com/wwayne/react-tooltip/pull/106) Workaround for fixed elements inside transformed elements (@nd0ut) - -### 2.0.3 (2016/06/01 13:45 +00:00) - -- [#112](https://github.com/wwayne/react-tooltip/pull/112) Add custom event to hide tooltip (@wwayne) -- [#103](https://github.com/wwayne/react-tooltip/pull/103) Allow user to specify separate off event for the tooltip (@ondy1985) - -### 2.0.2 (2016/05/19 10:01 +00:00) - -- [#104](https://github.com/wwayne/react-tooltip/pull/104) Ensure data-html is converted to bool type (@antoniodgonzalez) - -### 2.0.1 (2016/05/14 00:32 +00:00) - -- [#102](https://github.com/wwayne/react-tooltip/pull/102) Clear hide timeout on component unmount (@oluckyman) -- [#100](https://github.com/wwayne/react-tooltip/pull/100) correct spelling error (@SashaBayan) -- [#99](https://github.com/wwayne/react-tooltip/pull/99) Simplify setting Sstate in the showTooltip (@Kiwka) - -### 2.0.0 (2016/04/29 01:07 +00:00) - -- [#96](https://github.com/wwayne/react-tooltip/pull/96) New attribute isCapture, deprecate eventPropagationMode (@wwayne) - -### 1.2.1 (2016/04/23 00:16 +00:00) - -- [#95](https://github.com/wwayne/react-tooltip/pull/95) Added ability to change event propagation mode from default "bubble" to "capture" (@aweber1) -- [#93](https://github.com/wwayne/react-tooltip/pull/93) Upgrade classnames to `^2.2.0` (@petrbrzek) -- [#92](https://github.com/wwayne/react-tooltip/pull/92) Update peer dependencies to support react / react-dom >= 15.0.0 (@cchamberlain) - -### v1.1.3 (2016/03/10 12:57 +00:00) - -- [#84](https://github.com/wwayne/react-tooltip/pull/84) Add logic to handle outside cases for solid tooltips #83 (@andrejunges) -- [#81](https://github.com/wwayne/react-tooltip/pull/81) Fix typo (@robzolkos) - -### v1.1.2 (2016/02/15 12:31 +00:00) - -- [#79](https://github.com/wwayne/react-tooltip/pull/79) Require the non-minified dist build in index (@idan) -- [#73](https://github.com/wwayne/react-tooltip/pull/73) Clear timeout when unmounting. (@joelburget) -- [#72](https://github.com/wwayne/react-tooltip/pull/72) clearing delayShowLoop-Timeout when component will unmount (@dsumer) - -### v1.0.0 (2016/01/10 02:16 +00:00) - -- [#68](https://github.com/wwayne/react-tooltip/pull/68) better fix for Maximum call stack size exceeded (@enjalot) -- [#62](https://github.com/wwayne/react-tooltip/pull/62) Fixes IE's lacking event constructor (@mikkelvagn) -- [#54](https://github.com/wwayne/react-tooltip/pull/54) New Feature: watchWindow (@Sly777) -- [#55](https://github.com/wwayne/react-tooltip/pull/55) Add support for borders (@ahstro) -- [#1](https://github.com/wwayne/react-tooltip/pull/1) New Feature: watchWindow (@Sly777) - -### v0.9.0 (2015/11/26 14:09 +00:00) - -- [#53](https://github.com/wwayne/react-tooltip/pull/53) New Feature, Fixes (@Sly777) - -### v0.5.0 (2015/09/13 00:55 +00:00) - -- [#36](https://github.com/wwayne/react-tooltip/pull/36) also babelify and move style.js to dist (@conorhastings) -- [#34](https://github.com/wwayne/react-tooltip/pull/34) avoid getBoundingClientRect() to be called twice (@ruffle1986) - -### v0.3.7 (2015/08/18 13:44 +00:00) - -- [#26](https://github.com/wwayne/react-tooltip/pull/26) Add editorconfig and eslinter to project (@johnamiahford) - -### v0.3.5 (2015/08/02 10:58 +00:00) - -- [#22](https://github.com/wwayne/react-tooltip/pull/22) Convert ReactTooltip to es6 class (@johnamiahford) -- [#19](https://github.com/wwayne/react-tooltip/pull/19) remove querySelector and use findDOMNode instead (@bezreyhan) - -### v0.3.0 (2015/06/17 08:46 +00:00) - -- [#15](https://github.com/wwayne/react-tooltip/pull/15) Adding support for server-side rendering (@bluejamesbond) -- [#8](https://github.com/wwayne/react-tooltip/pull/8) Change curly brackets to quotes (single) (@af7) -- [#6](https://github.com/wwayne/react-tooltip/pull/6) Fix bug with mouse hover triggerring on tooltip children (@tom-s) -- [#5](https://github.com/wwayne/react-tooltip/pull/5) fixed classnames require call (@mciparelli) diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md deleted file mode 100644 index d40e9e075..000000000 --- a/CODE_OF_CONDUCT.md +++ /dev/null @@ -1,53 +0,0 @@ -## Code of Conduct - -### Our Pledge - -We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, caste, color, religion, or sexual identity and orientation. - -We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. - -### Our Standards - -Examples of behavior that contributes to a positive environment for our community include: - -- Demonstrating empathy and kindness toward other people -- Being respectful of differing opinions, viewpoints, and experiences -- Giving and gracefully accepting constructive feedback -- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience -- Focusing on what is best not just for us as individuals, but for the overall community - -Examples of unacceptable behavior include: - -- The use of sexualized language or imagery, and sexual attention or advances of any kind -- Trolling, insulting or derogatory comments, and personal or political attacks -- Public or private harassment -- Publishing others’ private information, such as a physical or email address, without their explicit permission -- Other conduct which could reasonably be considered inappropriate in a professional setting - -### Enforcement Responsibilities - -Project maintainers are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful. - -Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate. - -### Scope - -This Code of Conduct applies within all community spaces and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. - -### Enforcement - -Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the project team responsible for enforcement. All complaints will be reviewed and investigated promptly and fairly. - -All project maintainers are obligated to respect the privacy and security of the reporter of any incident. - -Project maintainers who do not follow or enforce the Code of Conduct in good -faith may face temporary or permanent repercussions as determined by other -members of the project's leadership. - -### Attribution - -This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.1, -available at [https://www.contributor-covenant.org/version/2/1/code_of_conduct/][version] - -[homepage]: http://contributor-covenant.org -[version]: https://www.contributor-covenant.org/version/2/1 diff --git a/CONTRIBUTION.md b/CONTRIBUTION.md deleted file mode 100644 index 5221472eb..000000000 --- a/CONTRIBUTION.md +++ /dev/null @@ -1,38 +0,0 @@ -# Contribution - -## Running project locally - -### ReactTooltip (root) - -1. Run `npm install` || `yarn` to install dependencies -2. You can test by: `yarn dev` to run dev mode, or you can run **docs** directly using root folder instead of NPM, for this, please check **docs section**. - -### Docs - -You still need step 1 from `ReactTooltip (root)` section. -Docs are commited using npm packages, but with this steps, you can use local ReactTooltip package build. - -1. In **docs** folder, run `npm install` || `yarn` to install dependencies -2. In **root** folder (parent of docs folder), run `yarn build` to generate a production build (you can use `yarn build --watch` to always generate a new build when a file changes) -3. Change `package.json`: - -From this: -``` -"react": "18.2.0", -"react-dom": "18.2.0", -"react-tooltip": "5.0.0" -``` - -To this: -``` -"react": "link:../node_modules/react", -"react-dom": "link:../node_modules/react-dom", -"react-tooltip": "link:.." - -``` - -4. Run `yarn start` and open `localhost:3000` to see docs running locally. - -OBS: do not commit this change or the docs will broken the deployment and will not be updated. - - diff --git a/LICENSE b/LICENSE deleted file mode 100755 index ef63b3aee..000000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -The MIT License (MIT) - -Copyright (c) 2022 ReactTooltip Team Github - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md deleted file mode 100755 index ad8b69843..000000000 --- a/README.md +++ /dev/null @@ -1,162 +0,0 @@ -# react-tooltip - -[![Version](http://img.shields.io/npm/v/react-tooltip.svg)](https://www.npmjs.org/package/react-tooltip) -![typescript](https://badgen.net/badge/icon/typescript?icon=typescript&label) -[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) -[![npm download][download-image]][download-url] -![minified](https://badgen.net/bundlephobia/min/react-tooltip) -![minified gzip](https://badgen.net/bundlephobia/minzip/react-tooltip) - - - -[download-image]: https://img.shields.io/npm/dm/react-tooltip.svg?style=flat-square -[download-url]: https://npmjs.org/package/react-tooltip - -If you like the project, please give the project a GitHub 🌟 - ---- - -Why do we show ads on our docs? - -- ReactTooltip is an open source project, this is the way we found to be financed by the community. - -## Demo - -[![Edit ReactTooltip](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/gallant-leftpad-8kvtn7?file=/src/App.js) - -Documentation for V4 - [Github Page](https://reacttooltip.github.io/react-tooltip/). - -Documentation for V5 - [ReactTooltip](https://react-tooltip.com/docs/getting-started). - ---- - -## Installation - -```sh -npm install react-tooltip -``` - -or - -```sh -yarn add react-tooltip -``` - -## Sponsors - -### Gold Sponsors 🌟 - - - Frigade - - -React Tooltip is proud to be sponsored by [Frigade](https://frigade.com/?source=react-tooltip), a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, etc. - -#### Silver Sponsors ✪ - - - -## Powered by - -

- - - -

- -## Usage - -1 . Import the CSS file to set default styling. - -> [!WARNING]\ -> If you are using a version before than `v5.13.0`, you must import the CSS file or the tooltip won't show! - -```js -import 'react-tooltip/dist/react-tooltip.css' -``` - -This needs to be done only once and only if you are using a version before than `5.13.0`. We suggest you do it on your `src/index.js` or equivalent file. - -2 . Import `react-tooltip` after installation. - -```js -import { Tooltip } from 'react-tooltip' -``` - -or if you want to still use the name ReactTooltip as V4: - -```js -import { Tooltip as ReactTooltip } from 'react-tooltip' -``` - -3 . Add `data-tooltip-id=""` and `data-tooltip-content=""` to your element. - -> `data-tooltip-id` is the equivalent of V4's `data-for`. - -```jsx - - ◕‿‿◕ - -``` - -4 . Include the `` element. - -> [!NOTE]\ -> Don't forget to set the id, it won't work without it! - -```jsx - -``` - -## Troubleshooting - -Before trying these, make sure you're running the latest ReactTooltip version with - -```sh -npm install react-tooltip@latest -``` - -or - -```sh -yarn add react-tooltip@latest -``` - -Please check our [troubleshooting section](https://react-tooltip.com/docs/troubleshooting) on our docs. - -If you can't find your problem here, make sure there isn't [an open issue](https://github.com/ReactTooltip/react-tooltip/issues) already covering it. -If there isn't, feel free to [submit a new issue](https://github.com/ReactTooltip/react-tooltip/issues/new/choose). - -## Article - -[How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a) - -## Maintainers - -[danielbarion](https://github.com/danielbarion) Maintainer - Creator of React Tooltip >= V5. - -[gabrieljablonski](https://github.com/gabrieljablonski) Maintainer. - -[aronhelser](https://github.com/aronhelser) (inactive). - -[alexgurr](https://github.com/alexgurr) (inactive). - -[pdeszynski](https://github.com/pdeszynski) (inactive). - -[roggervalf](https://github.com/roggervalf) (inactive). - -[huumanoid](https://github.com/huumanoid) (inactive) - -[wwayne](https://github.com/wwayne) (inactive) - Creator of the original React Tooltip (V1.x ~ V4.x.) - -We would gladly accept a new maintainer to help out! - -## Contributing - -We welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our [contributing](CONTRIBUTION.md) doc has some details. - -## License - -MIT diff --git a/example/build/asset-manifest.json b/asset-manifest.json similarity index 100% rename from example/build/asset-manifest.json rename to asset-manifest.json diff --git a/beta-release.js b/beta-release.js deleted file mode 100644 index cefe53e5e..000000000 --- a/beta-release.js +++ /dev/null @@ -1,77 +0,0 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ -const util = require('util') -const exec = util.promisify(require('child_process').exec) -const package = require('./package.json') - -const args = require('minimist')(process.argv.slice(2)) - -const issueNumber = args['issue'] - -console.log(issueNumber) - -const runCommand = async (command) => { - return new Promise((resolve) => { - exec(command, (error, stdout, stderr) => { - resolve({ error, stdout, stderr }) - }) - }) -} - -const AutoBetaRelease = async () => { - // get all the versions of the package from npm - const { stdout } = await runCommand(`npm view . versions --json`) - - // show npm published versions of this package - console.log(stdout) - - // check if there is a beta release with the same issue number on published versions - const arrayOfBetaReleases = JSON.parse(stdout).filter((version) => - version.includes(`${package.version}-beta.${issueNumber}`), - ) - - let fullLastBetaRelease = null - - // if yes, get the latest beta release. Output: 1.0.0-beta.1.rc.0 - if (arrayOfBetaReleases.length) { - fullLastBetaRelease = arrayOfBetaReleases[arrayOfBetaReleases.length - 1] - } - - console.log('Last Beta Release: ', fullLastBetaRelease) - - let nextBetaReleaseVersion = 0 - - if (fullLastBetaRelease) { - const lastBetaReleaseRCVersionArray = fullLastBetaRelease.match(/rc.+[0-9]+/g) - - const lastBetaReleaseRCVersion = - lastBetaReleaseRCVersionArray && lastBetaReleaseRCVersionArray.length - ? lastBetaReleaseRCVersionArray[0] - : null - - const lastBetaReleaseVersion = lastBetaReleaseRCVersion - ? lastBetaReleaseRCVersion.split('.')[1] - : 0 - - nextBetaReleaseVersion = parseInt(lastBetaReleaseVersion, 10) + 1 - } - - // next beta release version. Output: 1.0.0-beta.1.rc.1 - const nextBetaReleaseVesionFull = `${package.version}-beta.${issueNumber}.rc.${nextBetaReleaseVersion}` - - // update the beta version on package.json - const { error } = await runCommand( - `npm version ${nextBetaReleaseVesionFull} --no-git-tag-version`, - ) - - if (error) { - console.error(error) - return - } - - // the beta version is already updated on package.json on the next line - console.log('Next Beta version: ', `${nextBetaReleaseVesionFull}`) - - await runCommand(`echo "NEW_VERSION=${nextBetaReleaseVesionFull}" >> $GITHUB_ENV`) -} - -AutoBetaRelease() diff --git a/bower.json b/bower.json deleted file mode 100755 index bdb22350e..000000000 --- a/bower.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "name": "react-tooltip", - "description": "react tooltip component", - "main": "standalone/react-tooltip.js", - "moduleType": ["globals", "amd", "node"], - "license": "MIT", - "ignore": ["bin", "example"], - "keywords": ["react", "react-component", "tooltip", "react-tooltip"], - "authors": [ - "wwayne", - "danielbarion", - "alexgurr", - "aronhelser", - "roggervalf", - "huumanoid" - ], - "homepage": "https://github.com/wwayne/react-tooltip", - "repository": { - "type": "git", - "url": "https://github.com/wwayne/react-tooltip" - }, - "dependencies": { - "react": ">=0.14", - "react-dom": ">=0.14" - } -} diff --git a/bundlesize.config.json b/bundlesize.config.json deleted file mode 100644 index 5b2d03d81..000000000 --- a/bundlesize.config.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "files": [ - { - "path": "./dist/react-tooltip.min.cjs", - "maxSize": "10 kB" - }, - { - "path": "./dist/react-tooltip.min.mjs", - "maxSize": "10 kB" - }, - { - "path": "./dist/react-tooltip.umd.min.js", - "maxSize": "10 kB" - } - ] -} diff --git a/docs/.gitignore b/docs/.gitignore deleted file mode 100644 index 9a74dccab..000000000 --- a/docs/.gitignore +++ /dev/null @@ -1,25 +0,0 @@ -# Dependencies -/node_modules - -# Production -/build - -# Generated files -.docusaurus -.cache-loader - -# Misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local - -npm-debug.log* -yarn-debug.log* -yarn-error.log* - - -# yalc -/.yalc -yalc.lock diff --git a/docs/README.md b/docs/README.md deleted file mode 100644 index b27c407f3..000000000 --- a/docs/README.md +++ /dev/null @@ -1,50 +0,0 @@ -# Website - -This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator. - -### Installation - -``` -$ yarn -``` - -### Local Development - -You can link react packages and react-tooltip to this repository, but this should not be updated in github: - -In package.json: -``` - "react": "link:../node_modules/react", - "react-dom": "link:../node_modules/react-dom", - "react-tooltip": "link:.." -``` - -``` -$ yarn start -``` - -This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. - -### Build - -``` -$ yarn build -``` - -This command generates static content into the `build` directory and can be served using any static contents hosting service. - -### Deployment - -Using SSH: - -``` -$ USE_SSH=true yarn deploy -``` - -Not using SSH: - -``` -$ GIT_USER= yarn deploy -``` - -If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. diff --git a/docs/babel.config.js b/docs/babel.config.js deleted file mode 100644 index 675264818..000000000 --- a/docs/babel.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - presets: [require.resolve('@docusaurus/core/lib/babel/preset')], -} diff --git a/docs/docs/examples/_category_.json b/docs/docs/examples/_category_.json deleted file mode 100644 index 367d46aaf..000000000 --- a/docs/docs/examples/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Examples", - "position": 4, - "link": { - "type": "generated-index", - "description": "Examples for the tooltip props and some interesting use cases." - } -} diff --git a/docs/docs/examples/anchor-select.mdx b/docs/docs/examples/anchor-select.mdx deleted file mode 100644 index 1539d9fbb..000000000 --- a/docs/docs/examples/anchor-select.mdx +++ /dev/null @@ -1,172 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Anchor select - -Using the ReactTooltip anchor select prop. - -import { Tooltip } from 'react-tooltip' - -export const TooltipAnchor = ({ children, id, ...rest }) => { - return ( - - {children} - - ) -} - -### Basic usage - -The `anchorSelect` prop uses a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) to attach the tooltip to the anchor elements. The most common use for this is selecting elements with a specific id, or with a CSS class. - -#### Using id attribute - -:::info - -A CSS selector for a specific id begins with a `#`. Don't forget to put it before the id on your selector! - -::: - -```jsx -import { Tooltip } from 'react-tooltip'; - -◕‿‿◕ - -``` - -◕‿‿◕ - - -#### Using class attribute - -:::info - -A CSS selector for a specific class begins with a `.`. Don't forget to put it before the class on your selector! - -::: - -```jsx -import { Tooltip } from 'react-tooltip'; - -◕‿‿◕ -◕‿‿◕ -◕‿‿◕ -◕‿‿◕ - -``` - -
- ◕‿‿◕ - ◕‿‿◕ - ◕‿‿◕ - ◕‿‿◕ -
- - -### Complex selectors - -Once you've understood how it works, you can write CSS selectors as complex as you can imagine. Here are some interesting examples. - -#### Attribute prefix - -:::info - -`[attr^='prefix']` can be read as "any element that has an attribute `attr` in which its value starts with `prefix`". Remove the `^` for an exact match. - -This example uses the `name` attribute, but it works for any HTML attribute (id, class, ...). - -::: - -```jsx -import { Tooltip } from 'react-tooltip'; - -◕‿‿◕ -◕‿‿◕ -◕‿‿◕ -◕‿‿◕ - -``` - -
- ◕‿‿◕ - ◕‿‿◕ - ◕‿‿◕ - ◕‿‿◕ -
- - -#### Child selector - -:::info - -Make sure there isn't an easier alternative before diving into complex selectors like this. - -Often you can just use a class selector or something else much simpler. - -::: - -```jsx -import { Tooltip } from 'react-tooltip'; - -
- ◕‿‿◕ - ◕‿‿◕ - ◕‿‿◕ - ◕‿‿◕ -
- - -``` - -
- ◕‿‿◕ - ◕‿‿◕ - ◕‿‿◕ - ◕‿‿◕ -
- - diff --git a/docs/docs/examples/basic-examples.mdx b/docs/docs/examples/basic-examples.mdx deleted file mode 100644 index 6907f822c..000000000 --- a/docs/docs/examples/basic-examples.mdx +++ /dev/null @@ -1,116 +0,0 @@ ---- -sidebar_position: 0 ---- - -# Basic examples - -Some basic examples of how to use the ReactTooltip component. - -import { Tooltip } from 'react-tooltip' - -export const TooltipAnchor = ({ children, id, ...rest }) => { - return ( - - {children} - - ) -} - -### Data attributes - -```jsx -import { Tooltip } from 'react-tooltip'; - - - ◕‿‿◕ - - - ◕‿‿◕ - - -``` - -
- - ◕‿‿◕ - - - ◕‿‿◕ - -
- - -### Props - -#### Using anchor element `id` - -```jsx -import { Tooltip } from 'react-tooltip'; - -◕‿‿◕ - -``` - -◕‿‿◕ - - -#### Using anchor elements `className` - -:::info - -Check the [Anchor select examples](./anchor-select.mdx) for more complex use cases. - -::: - -```jsx -import { Tooltip } from 'react-tooltip'; - -◕‿‿◕ -◕‿‿◕ - -``` - -
- ◕‿‿◕ - ◕‿‿◕ -
- diff --git a/docs/docs/examples/children.mdx b/docs/docs/examples/children.mdx deleted file mode 100644 index efb51221e..000000000 --- a/docs/docs/examples/children.mdx +++ /dev/null @@ -1,71 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Children - -Using children for setting the ReactTooltip content. - -import { Tooltip } from 'react-tooltip' - -export const TooltipAnchor = ({ children, id, ...rest }) => { - return ( - - {children} - - ) -} - -### Using `children` as content - -When using `children` as content, `html` and `content` props (and their respective data attributes) will take priority. - -This is useful for setting a placeholder for the tooltip content. - -```jsx -import { Tooltip } from 'react-tooltip'; - -◕‿‿◕ - -
-

This is a very interesting header

-

Here's some interesting stuff:

-
    -
  • Some
  • -
  • Interesting
  • -
  • Stuff
  • -
-
-
-``` - -
- ◕‿‿◕ - -
-

This is a very interesting header

-

Here's some interesting stuff:

-
    -
  • Some
  • -
  • Interesting
  • -
  • Stuff
  • -
-
-
-
diff --git a/docs/docs/examples/content.mdx b/docs/docs/examples/content.mdx deleted file mode 100644 index f4af61efa..000000000 --- a/docs/docs/examples/content.mdx +++ /dev/null @@ -1,68 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Content - -Setting the ReactTooltip content. - -import { Tooltip } from 'react-tooltip' - -export const TooltipAnchor = ({ children, id, ...rest }) => { - return ( - - {children} - - ) -} - -### Using `data-tooltip-content` anchor element attribute - -```jsx -import { Tooltip } from 'react-tooltip'; - - - ◕‿‿◕ - - -``` - - - ◕‿‿◕ - - - -### Using `content` tooltip prop - -```jsx -import { Tooltip } from 'react-tooltip'; - -◕‿‿◕ - -``` - -◕‿‿◕ - diff --git a/docs/docs/examples/delay.mdx b/docs/docs/examples/delay.mdx deleted file mode 100644 index f4e3a9b1a..000000000 --- a/docs/docs/examples/delay.mdx +++ /dev/null @@ -1,82 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Delays - -Delay showing/hiding the ReactTooltip component. - -import { Tooltip } from 'react-tooltip' - -export const TooltipAnchor = ({ children, id, ...rest }) => { - return ( - - {children} - - ) -} - -### Delay to hide tooltip - -```jsx -import { Tooltip } from 'react-tooltip'; - - - ◕‿‿◕ - - -``` - - - ◕‿‿◕ - - - -### Delay to show tooltip - -```jsx -import { Tooltip } from 'react-tooltip'; - - - ◕‿‿◕ - - -``` - - - ◕‿‿◕ - - diff --git a/docs/docs/examples/events.mdx b/docs/docs/examples/events.mdx deleted file mode 100644 index 0d4d0a4b9..000000000 --- a/docs/docs/examples/events.mdx +++ /dev/null @@ -1,86 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Events - -Events available in ReactTooltip component. - -:::danger - -This has been deprecated. Use `openOnClick`, or `openEvents`, `closeEvents`, and `globalCloseEvents` instead. - -See the [options page](../options.mdx#available-props) for more details. - -::: - -import { Tooltip } from 'react-tooltip' - -export const TooltipAnchor = ({ children, id, ...rest }) => { - return ( - - {children} - - ) -} - -### Using `hover` - -:::info - -This is the default event option, so it doesn't have to be manually set. - -::: - -```jsx -import { Tooltip } from 'react-tooltip'; - - ◕‿‿◕ - -``` - -◕‿‿◕ - - -### Using `click` - -:::info - -Clicking anywhere outside the anchor element will close the tooltip. - -::: - -```jsx -import { Tooltip } from 'react-tooltip'; - - ◕‿‿◕ - -``` - -◕‿‿◕ - diff --git a/docs/docs/examples/html.mdx b/docs/docs/examples/html.mdx deleted file mode 100644 index 53b3f8d87..000000000 --- a/docs/docs/examples/html.mdx +++ /dev/null @@ -1,108 +0,0 @@ ---- -sidebar_position: 1 ---- - -# HTML - -Using HTML content in ReactTooltip component. - -import { Tooltip } from 'react-tooltip' - -export const TooltipAnchor = ({ children, id, ...rest }) => { - return ( - - {children} - - ) -} - -### Using `data-tooltip-html` attribute - -:::info - -You can also use [`renderToStaticMarkup()`](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to render HTML/JSX. - -::: - -```jsx -import { Tooltip } from 'react-tooltip'; - - - ◕‿‿◕ - - -``` - - - ◕‿‿◕ - - - -### Using `html` prop - -:::info - -You should probably pass the content as children to the tooltip instead. - -::: - -```jsx -import { Tooltip } from 'react-tooltip'; - -◕‿‿◕ - -``` - -◕‿‿◕ - - -#### Security note - -The `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. -Any user-supplied content must be sanitized, using a package like [sanitize-html](https://www.npmjs.com/package/sanitize-html). -We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option. - -#### JSX note - -You can use [`renderToStaticMarkup()` function](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to use JSX instead of HTML. -**Example:** - -```jsx -import ReactDOMServer from 'react-dom/server'; -[...] -I am JSX content)} -> - ◕‿‿◕ - -``` diff --git a/docs/docs/examples/imperative-mode.mdx b/docs/docs/examples/imperative-mode.mdx deleted file mode 100644 index b8fe35537..000000000 --- a/docs/docs/examples/imperative-mode.mdx +++ /dev/null @@ -1,207 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Imperative mode (ref) - -Using the ReactTooltip imperative mode to control the tooltip programmatically. - -import { useRef } from 'react'; -import { Tooltip } from 'react-tooltip' - -export const TooltipAnchor = ({ children, id, ...rest }) => { - return ( - - {children} - - ) -} - -### Basic usage - -A ref object created with `React.useRef()` can be passed to the `ref` tooltip prop. -It allows you to expose internal state variables (read-only), and to also control the tooltip programmatically. - -#### API - -```ts -interface TooltipImperativeOpenOptions { - anchorSelect?: string - position?: IPosition - place?: PlacesType - /** - * In practice, `ChildrenType` -> `React.ReactNode` - */ - content?: ChildrenType - /** - * Delay (in ms) before opening the tooltip. - */ - delay?: number -} - -interface TooltipImperativeCloseOptions { - /** - * Delay (in ms) before closing the tooltip. - */ - delay?: number -} - -interface TooltipRefProps { - open: (options?: TooltipImperativeOpenOptions) => void - close: (options?: TooltipImperativeCloseOptions) => void - /** - * @readonly - */ - activeAnchor: HTMLElement | null - /** - * @readonly - */ - place: PlacesType - /** - * @readonly - */ - isOpen: boolean -} -``` - -#### Methods - -:::info - -The imperative methods can be applied alongside regular tooltip usage. For example, you could use just `close()` to close a regular tooltip after an HTTP request is finished. - -If you intend to use the tooltip exclusively with these methods, setting the `imperativeModeOnly` prop to disable default behavior is recommended. Otherwise, you might face undesired behavior. - -::: - -- `open()` opens the tooltip programmatically. All arguments are optional - - `anchorSelect` overrides the current selector. Ideally, it should match only one element (e.g. `#my-element`) - - `position` overrides the `position` tooltip prop - - `place` overrides the `place` tooltip prop - - `content` overrides the tooltip content, whether it was set through `content`, `render`, or any other way - - `delay` indicates how long (in ms) before the tooltip actually opens -- `close()` closes the tooltip programmatically - - `delay` indicates how long (in ms) before the tooltip actually closes - -#### Internal state - -:::note - -These are read-only. Updating their values has no effect on the tooltip. - -::: - -- `activeAnchor` is a reference to the current anchor element -- `place` is the current tooltip placement relative to the anchor element. Can differ from the `place` tooltip prop if the tooltip is close to the edges of its container -- `isOpen` indicates whether the tooltip is currently being shown or not - -```jsx -import { useRef } from 'react'; -import { Tooltip, TooltipRefProps } from 'react-tooltip'; - -const tooltipRef1 = useRef(null) -const tooltipRef2 = useRef(null) - - - ◕‿‿◕ - - - - - -``` - -:::caution - -Notice the tooltip still closes when unhovering the anchor element. This might be undesired if you're using the imperative methods exclusively. - -If that's the case, use the `imperativeModeOnly` tooltip prop to disable default tooltip behavior. - -::: - -export const ImperativeModeExample = () => { - const tooltipRef1 = useRef(null) - const tooltipRef2 = useRef(null) - return ( - <> - - ◕‿‿◕ - -
- - -
- - - - ) -} - -
- -
diff --git a/docs/docs/examples/multiline.mdx b/docs/docs/examples/multiline.mdx deleted file mode 100644 index 377f2954a..000000000 --- a/docs/docs/examples/multiline.mdx +++ /dev/null @@ -1,86 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Multiline - -Multiline content in ReactTooltip component. - -import { Tooltip } from 'react-tooltip' - -export const TooltipAnchor = ({ children, id, ...rest }) => { - return ( - - {children} - - ) -} - -### Using `data-tooltip-html` - -:::info - -You can also use [`renderToStaticMarkup()`](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to render HTML/JSX. - -::: - -```jsx -import { Tooltip } from 'react-tooltip'; - - - ◕‿‿◕ - - -``` - - - ◕‿‿◕ - - - -### Using tooltip children and JSX - -```jsx -import { Tooltip } from 'react-tooltip'; - - ◕‿‿◕ - -
- Hello - some stuff in between - world! -
-
-``` - -◕‿‿◕ - -
- Hello - some stuff in between - world! -
-
diff --git a/docs/docs/examples/offset.mdx b/docs/docs/examples/offset.mdx deleted file mode 100644 index 2f7c90070..000000000 --- a/docs/docs/examples/offset.mdx +++ /dev/null @@ -1,82 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Offset - -Offset option for the ReactTooltip component. - -import { Tooltip } from 'react-tooltip' - -export const TooltipAnchor = ({ children, id, ...rest }) => { - return ( - - {children} - - ) -} - -### Using `data-tooltip-offset` attribute - -```jsx -import { Tooltip } from 'react-tooltip'; - -◕‿‿◕ -◕‿‿◕ -◕‿‿◕ -◕‿‿◕ -◕‿‿◕ - -``` - -
- - ◕‿‿◕ - - - ◕‿‿◕ - - - ◕‿‿◕ - - - ◕‿‿◕ - - - ◕‿‿◕ - - -
- -### Using `offset` tooltip prop - -```jsx -import { Tooltip } from 'react-tooltip'; - -◕‿‿◕ - -``` - -◕‿‿◕ - diff --git a/docs/docs/examples/place.mdx b/docs/docs/examples/place.mdx deleted file mode 100644 index b8e1b1086..000000000 --- a/docs/docs/examples/place.mdx +++ /dev/null @@ -1,144 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Place - -Changing the placement for the ReactTooltip component. - -import { useState } from 'react'; -import { Tooltip } from 'react-tooltip' - -export const TooltipAnchor = ({ children, id, ...rest }) => { - return ( - - {children} - - ) -} - -The `place` prop and the `data-tooltip-place` attribute accept the following values: `'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'`. - -### Using `data-tooltip-place` attribute - -```jsx -import { Tooltip } from 'react-tooltip'; -const PLACES = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'] - -◕‿‿◕ -{PLACES.map(place => ( - -))} -``` - -export const PlacementExampleAttributes = () => { - const PLACES1 = ['top', 'right', 'bottom', 'left']; - const PLACES2 = ['top-start', 'right-start', 'bottom-start', 'left-start']; - const PLACES3 = ['top-end', 'right-end', 'bottom-end', 'left-end']; - - return ( - <> -
- ◕‿‿◕ - ◕‿‿◕ - ◕‿‿◕ -
-
- {PLACES1.map(place => ( - - ))} - {PLACES2.map(place => ( - - ))} - {PLACES3.map(place => ( - - ))} -
- - ) -} - - - - - -### Using `place` prop - -```jsx -import { Tooltip } from 'react-tooltip'; - -const PLACES = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'] -const [place, setPlace] = useState(0) - - setPlace(p => (p + 1) % 12)} -> - ◕‿‿◕ - - -``` - -export const PlacementExample = () => { - const PLACES = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']; - const [place, setPlace] = useState(0) - - return ( - <> - setPlace(p => (p + 1) % 12)} - > - ◕‿‿◕ - - - - ) -} - - diff --git a/docs/docs/examples/provider-wrapper.mdx b/docs/docs/examples/provider-wrapper.mdx deleted file mode 100644 index e93922f9b..000000000 --- a/docs/docs/examples/provider-wrapper.mdx +++ /dev/null @@ -1,138 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Provider/wrapper - -Using multiple anchors elements with a single ReactTooltip component. - -:::danger - -This has been deprecated. Use the `data-tooltip-id` attribute, or the `anchorSelect` prop instead. [Click here](../getting-started.mdx) for more details. - -::: - -import { Tooltip, TooltipProvider, TooltipWrapper } from 'react-tooltip' - -export const TooltipAnchor = ({ children, id, ...rest }) => { - return ( - - {children} - - ) -} - -export const WithProvider = ({ children }) => { - return {children} -} - -### Setting up `` - -To get the `` to work, your component must be inside the ``. -For simplicity, just wrap your whole application with the provider. - -```jsx -// this is usually the `src/App.jsx` (or `src/App.tsx`) file -import { TooltipProvider } from 'react-tooltip' - -function App() { - return ( - - - - ) -} - -export default App -``` - -### Using `` - -```jsx -import { Tooltip, TooltipWrapper } from 'react-tooltip'; - - - ◕‿‿◕ - - - ◕‿‿◕ - -// the tooltip component can be placed anywhere inside the provider - -``` - -
- - - ◕‿‿◕ - - - ◕‿‿◕ - - - -
- -### Multiple tooltips - -:::danger - -Reminder that this has been deprecated. Use the `data-tooltip-id` attribute, or the `anchorSelect` prop instead. [Click here](../getting-started.mdx) for more details. - -::: - -If you need to use multiple tooltips, each with multiple anchors, use the tooltip `id` prop, and the wrapper `tooltipId` prop. - -```jsx -import { Tooltip, TooltipWrapper } from 'react-tooltip'; - - - ◕‿‿◕ - - - ◕‿‿◕ - - - ◕‿‿◕ - - - ◕‿‿◕ - - - -``` - -
- - - ◕‿‿◕ - - - ◕‿‿◕ - - - ◕‿‿◕ - - - ◕‿‿◕ - - - - -
diff --git a/docs/docs/examples/render.mdx b/docs/docs/examples/render.mdx deleted file mode 100644 index 65b4a4acf..000000000 --- a/docs/docs/examples/render.mdx +++ /dev/null @@ -1,117 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Render - -Using the ReactTooltip render prop to render dynamic content based on the active anchor element. - -import { Tooltip } from 'react-tooltip' - -export const TooltipAnchor = ({ children, id, ...rest }) => { - return ( - - {children} - - ) -} - -### Basic usage - -The `render` prop can be used to render the tooltip content dynamically based on the currently active anchor element. -The function signature is as follows: - -```ts -(render: { content: string | null; activeAnchor: HTMLElement | null }) => ChildrenType -``` - -- `content` is available for quick access to the `data-tooltip-content` attribute on the anchor element -- `activeAnchor` is a ref to the anchor element currently active (or `null` if no element is active) -- `ChildrenType` is essentially the same as `React.ReactNode` - -```jsx -import { Tooltip } from 'react-tooltip'; - - - ◕‿‿◕ - - - ◕‿‿◕ - - - ◕‿‿◕ - - ( - - The element #{content} is currently active. -
- Relevant attribute: {activeAnchor?.getAttribute('data-some-relevant-attr') || 'not set'} -
- )} -/> -``` - -
- - ◕‿‿◕ - - - ◕‿‿◕ - - - ◕‿‿◕ - - ( - - The element #{content} is currently active. -
- Relevant attribute: {activeAnchor?.getAttribute('data-some-relevant-attr') || 'not set'} -
- )} - /> -
diff --git a/docs/docs/examples/state.mdx b/docs/docs/examples/state.mdx deleted file mode 100644 index d92f8b139..000000000 --- a/docs/docs/examples/state.mdx +++ /dev/null @@ -1,121 +0,0 @@ ---- -sidebar_position: 1 ---- - -# State - -Controlled state example for the ReactTooltip component. - -import { useState } from 'react' -import { Tooltip } from 'react-tooltip' - -export const TooltipAnchor = ({ children, id, background, ...rest }) => { - return ( - - {children} - - ) -} - -### Controlled tooltip state - -:::caution - -Most of the time, leaving the state to be handled internally will be enough. - -Only do this if you need some more complex behavior. - -::: - -This is a very simple example in which hovering over any anchor element opens the tooltip, but it can only be closed by clicking the last anchor. - -It is just a demonstration, and you can come up with use cases as complex as you can imagine. - -```jsx -import { useState } from 'react'; -import { Tooltip } from 'react-tooltip'; - -const [isOpen, setIsOpen] = useState(false) - - setIsOpen(true)}> - ◕‿‿◕ - - setIsOpen(true)}> - ◕‿‿◕ - - setIsOpen(true)}> - ◕‿‿◕ - - setIsOpen(true)}> - ◕‿‿◕ - - setIsOpen(true)}> - ◕‿‿◕ - - setIsOpen(true)} - onClick={() => setIsOpen(false)} -> - ◕‿‿◕ - - -``` - -export const ControlledStateExample = () => { - const [isOpen, setIsOpen] = useState(false) - return ( - <> - setIsOpen(true)}> - ◕‿‿◕ - - setIsOpen(true)}> - ◕‿‿◕ - - setIsOpen(true)}> - ◕‿‿◕ - - setIsOpen(true)}> - ◕‿‿◕ - - setIsOpen(true)}> - ◕‿‿◕ - - setIsOpen(true)} - onClick={() => setIsOpen(false)} - > - ◕‿‿◕ - - - - ) -} - -
- -
diff --git a/docs/docs/examples/styling.mdx b/docs/docs/examples/styling.mdx deleted file mode 100644 index baa5f7322..000000000 --- a/docs/docs/examples/styling.mdx +++ /dev/null @@ -1,513 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Styling - -How to customize tooltip styles in ReactTooltip styles. - -The tooltip arrow inherits its background color from the tooltip (its parent). - -import { Tooltip } from 'react-tooltip' -import CodeBlock from '@theme/CodeBlock' -import TooltipStyles from '!!raw-loader!../../../src/components/Tooltip/styles.module.css' -import TooltipCoreStyles from '!!raw-loader!../../../src/components/Tooltip/core-styles.module.css' - -export const TooltipAnchor = ({ children, id, ...rest }) => { - return ( - - {children} - - ) -} - -### Inline Styling - -You can add styles to the tooltip with inline styling. - -```jsx -import { Tooltip } from 'react-tooltip' - - - ◕‿‿◕ - - -``` - -
- - ◕‿‿◕ - - -
- -### Classes - -You don't need to use `!important` to override the styles, take advantage of CSS Specificity instead ([MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) | [W3c Docs](https://www.w3schools.com/css/css_specificity.asp)). - -Using CSS Specificity you can add a class with more specificity than the default used in tooltip so you can override or add new rules to the component style. - -```jsx -import { Tooltip } from 'react-tooltip' - - - - -``` - -
- - ◕‿‿◕ - - -
- -#### Explanation - -:::info -Please note that **Core** styles are different from **Base** styles, for more information, please check the [Disabling ReactTooltip CSS](#disabling-reacttooltip-css) section. -::: - -##### Base styles - -In this example, we are adding an extra level to the CSS classes. The following are the default **base** styles for the tooltip: - -{TooltipStyles} - -##### Core styles - -And the following are the **core** styles for the tooltip: - -{TooltipCoreStyles} - -If we only add new classes like below, it will not work because it has the same level of specificity as the default dark variant. - -```css -.example { - color: #222; - background-color: rgb(0, 247, 255); -} - -/** Add next line only if you want to have a tooltip arrow with a different background color from the tooltip **/ -.example .example-arrow { - background-color: rgb(255, 0, 0); -} -``` - -To make this work as expected, we need to add another level of specificity: - -```css -.some-class-or-rule .example { - color: #222; - background-color: rgb(0, 247, 255); -} - -/** Add next line only if you want to have a tooltip arrow with a different background color from the tooltip **/ -.some-class-or-rule .example .example-arrow { - background-color: rgb(255, 0, 0); -} -``` - ---- - -### Changing colors - -#### Orange - -```jsx -import { Tooltip } from 'react-tooltip' - - - - -``` - -
- - ◕‿‿◕ - - -
- -#### Pink - -```jsx -import { Tooltip } from 'react-tooltip' - - - - -``` - -
- - ◕‿‿◕ - - -
- -#### Tooltip Arrow with a different color from Tooltip - -:::info - -This is for demonstration purposes only. Using `arrowColor` instead is recommended. - -```jsx - -``` - -::: - -```jsx -import { Tooltip } from 'react-tooltip' - - - - -``` - -
- - ◕‿‿◕ - - -
- -### Changing the opacity - -Setting the opacity through CSS directly on the tooltip element breaks functionality. Use the `opacity` prop, or override the `--rt-opacity` CSS variable instead. - -```jsx -import { Tooltip } from 'react-tooltip' - - -``` - -```css -/* To be used instead of the `opacity` prop, not required otherwise */ -:root { - --rt-opacity: 0.3; -} -``` - -
- - ◕‿‿◕ - - -
- -### Changing the border radius - -#### Removing radius - -```jsx -import { Tooltip } from 'react-tooltip' - - - - -``` - -
- - ◕‿‿◕ - - -
- -#### Rounded - -```jsx -import { Tooltip } from 'react-tooltip' - - - - -``` - -
- - ◕‿‿◕ - - -
- -### Changing the padding - -#### Removing padding - -```jsx -import { Tooltip } from 'react-tooltip' - - - - -``` - -
- - ◕‿‿◕ - - -
- -#### Adding more padding - -```jsx -import { Tooltip } from 'react-tooltip' - - - - -``` - -
- - ◕‿‿◕ - - -
- -### Changing the border - -If you're using the tooltip with the arrow, setting a border through CSS will not work for the arrow. - -We recommend using the `border` prop to avoid that. - -```jsx -import { Tooltip } from 'react-tooltip' - - -``` - -
- - ◕‿‿◕ - - -
- ---- - -:::info - -In summary, if you do it correctly you can use CSS specificity instead of `!important`. - -::: - -### Customizing opening/closing animation - -By default, the tooltip has a fade-in/fade-out transition when opening/closing, with a delay of 150ms for both. -If you wish to change the delay for any of them, override the following CSS variables: - -```css -:root { - --rt-transition-show-delay: 0.15s; - --rt-transition-closing-delay: 0.15s; -} -``` - -### Disabling ReactTooltip CSS - -ReactTooltip works seamlessly by automatically injecting CSS into your application. To disable this functionality, use the tooltip prop `disableStyleInjection`. -Details on how it works: - -- Set to `true`: what we call "base" styles will be disabled. Useful if you wish to style your tooltip from scratch. -- Set to `'core'`: both the "base" and the "core" styles will be disabled. This means the tooltip will not work properly without adding specific CSS attributes to it. - -In both cases, you can add `import 'react-tooltip/dist/react-tooltip.css'` to your project to get the tooltip working again, or add your own custom CSS. - -:::caution - -Do not set `disableStyleInjection` dynamically. Changing its value requires a page refresh, so that will not work. - -::: - -:::info - -Check out more details about the [base](#base-styles) and [core](#core-styles) styles. - -::: - -#### Environment variables - -:::danger - -This has been deprecated. Use [`disableStyleInjection`](#disabling-reacttooltip-css) instead. - -::: - -You can prevent ReactTooltip from injecting styles into the page by using environment variables. - -| name | type | required | default | values | description | -| ----------------------------------- | --------- | -------- | ------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `REACT_TOOLTIP_DISABLE_CORE_STYLES` | `boolean` | no | `false` | `true` `false` | Environment variable to disable **core** styles from being injected into the page by ReactTooltip.

We strongly recommend to keep the core styles being injected into the project unless you know what you are doing. | -| `REACT_TOOLTIP_DISABLE_BASE_STYLES` | `boolean` | no | `false` | `true` `false` | Environment variable to disable **base** styles from being injected into the page by ReactTooltip.

Those styles are just visual styles like colors, padding, etc... And can be disabled if you want to write your tooltip styles. | - - -#### `removeStyle()` function - -:::danger - -This has been deprecated. Use [`disableStyleInjection`](#disabling-reacttooltip-css) instead. - -::: - -You can also use the `removeStyle()` function to remove injected styles from the page. It accepts the following parameters: - -| name | type | required | default | values | description | -| ---- | ------ | -------- | ------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -| type | string | no | `base` | `base` `core` | If `core` is defined, the core styles will be removed from the page, if nothing is defined, `base` styles will be removed as default value | - -```jsx -import { removeStyle } from 'react-tooltip' - -removeStyle() // removes the injected base style of ReactTooltip -removeStyle({ type: 'core' }) // removes the injected core style of ReactTooltip - this can affect the basic functionality of ReactTooltip -``` diff --git a/docs/docs/examples/variant.mdx b/docs/docs/examples/variant.mdx deleted file mode 100644 index 2c0523643..000000000 --- a/docs/docs/examples/variant.mdx +++ /dev/null @@ -1,94 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Variant - -Default color stylings available for the ReactTooltip component. - -import { Tooltip } from 'react-tooltip' - -export const TooltipAnchor = ({ children, id, ...rest }) => { - return ( - - {children} - - ) -} - -`variant` can be one of `'dark' | 'light' | 'success' | 'warning' | 'error' | 'info'` - -```jsx -import { Tooltip } from 'react-tooltip'; - - - ◕‿‿◕ - - -``` - -
- - ◕‿‿◕ - - - ◕‿‿◕ - - - ◕‿‿◕ - - - ◕‿‿◕ - - - ◕‿‿◕ - - - ◕‿‿◕ - - -
diff --git a/docs/docs/getting-started.mdx b/docs/docs/getting-started.mdx deleted file mode 100644 index 7bcb7a69c..000000000 --- a/docs/docs/getting-started.mdx +++ /dev/null @@ -1,225 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Getting Started - -This docs is related to V5, [if you are using V4 please check here](https://reacttooltip.github.io/react-tooltip/). - -A react tooltip is a floating react element that displays information related to an anchor element when it receives keyboard focus or the mouse hovers over it. - -import { Tooltip } from 'react-tooltip' - -export const TooltipAnchor = ({ children, id, ...rest }) => { - return ( - - {children} - - ) -} - -## Installation - -```bash -npm install react-tooltip -``` - -or - -```bash -yarn add react-tooltip -``` - -## Usage - -:::info - -If you've been using V5 for a while, you'll notice we've deprecated the `anchorId` prop in favor of the `data-tooltip-id` attribute, or the `anchorSelect` prop. -For more info and more complex use cases using `anchorSelect`, check [the examples](./examples/anchor-select.mdx). - -::: - -### Set the default styling - -:::caution - -If you are using a version before than `v5.13.0`, you must import the CSS file or the tooltip won't show! - -::: - -:::info - -If you are using `v5.13.0` or newer, you don't need to import the css file manually, the styles will be injected into the page by default. - -::: - -```js -import 'react-tooltip/dist/react-tooltip.css' -``` - -This needs to be done only once. We suggest you do it on your `src/index.js` or equivalent file. -For advanced styling, check [the examples](./examples/styling.mdx). - -There are two ways to use ReactTooltip. - -1. Using props into ReactTooltip Element. -2. Using data-attributes on anchor element. - -### Using anchor data attributes - -1 . Import `react-tooltip` after installation. - -```js -import { Tooltip } from 'react-tooltip' -``` - -2 . Add `data-tooltip-id=""`, `data-tooltip-content=""` and other attributes to your elements. - -:::info - -[Click here](./options.mdx#available-attributes) the full list of available data attributes. - -::: - -```jsx - - ◕‿‿◕ - - - ◕‿‿◕ - -``` - -3 . Create `` element and set the `id` prop. - -:::caution - -Don't forget to set the tooltip id, or it will not work! - -::: - -```jsx - -``` - -
- - ◕‿‿◕ - - - ◕‿‿◕ - - -
- -### Using ReactTooltip props - -1 . Import `react-tooltip` after installation. - -```js -import { Tooltip } from 'react-tooltip' -``` - -2 . Create anchor elements. - -```jsx -◕‿‿◕ -◕‿‿◕ -◕‿‿◕ -``` - -3 . Create `` element and set the `anchorSelect` prop. - -:::caution - -`anchorSelect` must be a valid CSS selector. [Click here](./examples/anchor-select.mdx) for more info. - -::: - -:::info - -[Click here](./options.mdx#available-props) the full list of available tooltip props. - -::: - -```jsx - - Hello world! - -``` - -
- ◕‿‿◕ - ◕‿‿◕ - ◕‿‿◕ - Hello world! -
- -### Clickable tooltip - -By default, you can't interact with elements inside the tooltip. To allow for proper usage of elements such as buttons and inputs, use the `clickable` prop. - -```jsx -◕‿‿◕ - - - -◕‿‿◕ - - - -``` - -
- ◕‿‿◕ - - - - ◕‿‿◕ - - - -
- -### Styling - -Basic styling can be done by overriding the following css variables. -For advanced styling, check [the examples](./examples/styling.mdx). - -```css -:root { - --rt-color-white: #fff; - --rt-color-dark: #222; - --rt-color-success: #8dc572; - --rt-color-error: #be6464; - --rt-color-warning: #f0ad4e; - --rt-color-info: #337ab7; - --rt-opacity: 0.9; - --rt-transition-show-delay: 0.15s; - --rt-transition-closing-delay: 0.15s; -} -``` diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx deleted file mode 100644 index e689bc9be..000000000 --- a/docs/docs/options.mdx +++ /dev/null @@ -1,137 +0,0 @@ ---- -sidebar_position: 3 ---- - -# Options - -All available data attributes for the anchor element and props for the tooltip component. - -import { Tooltip } from 'react-tooltip' - -export const TooltipAnchor = ({ children, id, ...rest }) => { - return ( - - {children} - - ) -} - -### Data attributes - -```jsx -import { Tooltip } from 'react-tooltip'; - - - ◕‿‿◕ - - -``` - - - ◕‿‿◕ - - - -#### Available attributes - -| name | type | required | default | values | description | -| ------------------------------ | ---------- | --------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -| data-tooltip-id | string | false | | | The id set on the tooltip element (same as V4's `data-for`) | -| data-tooltip-content | string | false | | | Content to be displayed in the tooltip (`html` is priorized over `content`) | -| data-tooltip-html | string | false | | | HTML content to be displayed in tooltip | -| data-tooltip-place | string | false | `top` | `top` `top-start` `top-end` `right` `right-start` `right-end` `bottom` `bottom-start` `bottom-end` `left` `left-start` `left-end` | Position relative to the anchor element where the tooltip will be rendered (if possible) | -| data-tooltip-offset | number | false | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in the calculation) | -| data-tooltip-variant | string | false | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets | -| data-tooltip-wrapper | string | false | `div` | `div` `span` | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag | -| ~~data-tooltip-events~~ | ~~string~~ | ~~false~~ | ~~`hover`~~ | ~~`hover click` `hover` `click`~~ | ~~Events to watch for when handling the tooltip state~~
**DEPRECATED**
Use `openOnClick` tooltip prop instead | -| data-tooltip-position-strategy | string | false | `absolute` | `absolute` `fixed` | The position strategy used for the tooltip. Set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container | -| data-tooltip-delay-show | number | false | | any `number` | The delay (in ms) before showing the tooltip | -| data-tooltip-delay-hide | number | false | | any `number` | The delay (in ms) before hiding the tooltip | -| data-tooltip-float | boolean | false | `false` | `true` `false` | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) | -| data-tooltip-hidden | boolean | false | `false` | `true` `false` | Tooltip will not be shown | -| data-tooltip-class-name | string | false | | | Classnames for the tooltip container | - -### Props - -```jsx -import { Tooltip } from 'react-tooltip'; - -◕‿‿◕ - -``` - -◕‿‿◕ - - -#### Available props - -| name | type | required | default | values | description | -| ----------------------- | -------------------------- | -------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `ref` | Tooltip reference | no | | `React.useRef` | Reference object which exposes internal state, and some methods for manually controlling the tooltip. See [the examples](./examples/imperative-mode.mdx). | -| `className` | `string` | no | | | Class name to customize tooltip element. You can also use the default class `react-tooltip` which is set internally | -| `classNameArrow` | `string` | no | | | Class name to customize tooltip arrow element. You can also use the default class `react-tooltip-arrow` which is set internally | -| `content` | `string` | no | | | Content to be displayed in tooltip (`html` prop is priorized over `content`) | -| ~~`html`~~ | ~~`string`~~ | ~~no~~ | | | ~~HTML content to be displayed in tooltip~~
**DEPRECATED**
Use `children` or `render` instead | -| `render` | `function` | no | | | A function which receives a ref to the currently active anchor element and returns the content for the tooltip. Check the [examples](./examples/render.mdx) | -| `place` | `string` | no | `top` | `top` `top-start` `top-end` `right` `right-start` `right-end` `bottom` `bottom-start` `bottom-end` `left` `left-start` `left-end` | Position relative to the anchor element where the tooltip will be rendered (if possible) | -| `offset` | `number` | no | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in calculation) | -| `id` | `string` | no | | any `string` | The tooltip id. Must be set when using `data-tooltip-id` on the anchor element | -| ~~`anchorId`~~ | ~~`string`~~ | ~~no~~ | | ~~any `string`~~ | ~~The id for the anchor element for the tooltip~~
**DEPRECATED**
Use `data-tooltip-id` or `anchorSelect` instead | -| `anchorSelect` | CSS selector | no | | any valid CSS selector | The selector for the anchor elements. Check [the examples](./examples/anchor-select.mdx) for more details | -| `variant` | `string` | no | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets | -| `wrapper` | HTML tag | no | `div` | `div` `span` `p` ... | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag | -| `children` | React node | no | `undefined` | valid React children | The tooltip children have lower priority compared to the `content` prop and the `data-tooltip-content` attribute. Useful for setting default content | -| ~~`events`~~ | ~~`string[]`~~ | ~~no~~ | ~~`hover`~~ | ~~`hover` `click`~~ | ~~Events to watch for when handling the tooltip state~~
**DEPRECATED**
Use `openOnClick` tooltip prop instead | -| `openOnClick` | `boolean` | no | `false` | `true` `false` | When enabled, the tooltip will open on click instead of on hover. Use `openEvents`, `closeEvents`, and `globalCloseEvents` for more customization | -| `positionStrategy` | `string` | no | `absolute` | `absolute` `fixed` | The position strategy used for the tooltip. Set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container | -| `delayShow` | `number` | no | | any `number` | The delay (in ms) before showing the tooltip | -| `delayHide` | `number` | no | | any `number` | The delay (in ms) before hiding the tooltip | -| `float` | `boolean` | no | `false` | `true` `false` | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) | -| `hidden` | `boolean` | no | `false` | `true` `false` | Tooltip will not be shown | -| `noArrow` | `boolean` | no | `false` | `true` `false` | Tooltip arrow will not be shown | -| `clickable` | `boolean` | no | `false` | `true` `false` | Allow interaction with elements inside the tooltip. Useful when using buttons and inputs | -| ~~`closeOnEsc`~~ | ~~`boolean`~~ | ~~no~~ | ~~`false`~~ | ~~`true` `false`~~ | ~~Pressing escape key will close the tooltip~~
**DEPRECATED**
Use `globalCloseEvents` instead. | -| ~~`closeOnScroll`~~ | ~~`boolean`~~ | ~~no~~ | ~~`false`~~ | ~~`true` `false`~~ | ~~Scrolling will close the tooltip~~
**DEPRECATED**
Use `globalCloseEvents` instead. | -| ~~`closeOnResize`~~ | ~~`boolean`~~ | ~~no~~ | ~~`false`~~ | ~~`true` `false`~~ | ~~Resizing the window will close the tooltip~~
**DEPRECATED**
Use `globalCloseEvents` instead. | -| `openEvents` | `Record` | no | `mouseover` `focus` | `mouseover` `focus` `mouseenter` `click` `dblclick` `mousedown` | Events to be listened on the anchor elements to open the tooltip | -| `closeEvents` | `Record` | no | `mouseout` `blur` | `mouseout` `blur` `mouseleave` `click` `dblclick` `mouseup` | Events to be listened on the anchor elements to close the tooltip | -| `globalCloseEvents` | `Record` | no | | `escape` `scroll` `resize` `clickOutsideAnchor` | Global events to be listened to close the tooltip (`escape` closes on pressing `ESC`, `clickOutsideAnchor` is useful with click events on `openEvents`) | -| `imperativeModeOnly` | `boolean` | no | `false` | `true` `false` | When enabled, default tooltip behavior is disabled. Check [the examples](./examples/imperative-mode.mdx) for more details | -| `style` | `CSSProperties` | no | | a CSS style object | Add inline styles directly to the tooltip | -| `position` | `{ x: number; y: number }` | no | | any `number` value for both `x` and `y` | Override the tooltip position on the DOM | -| `isOpen` | `boolean` | no | | `true` `false` | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used **without** `setIsOpen`) | -| `defaultIsOpen` | `boolean` | no | `false` | `true` `false` | It determines the initial visibility of the tooltip. If true, the tooltip is shown by default, if false or not provided then it's in hidden state by default. | -| `setIsOpen` | `function` | no | | | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip | -| `afterShow` | `function` | no | | | A function to be called after the tooltip is shown | -| `afterHide` | `function` | no | | | A function to be called after the tooltip is hidden | -| `disableTooltip` | `function` | no | | | A function that takes a ref to each anchor element and returns a boolean indicating whether to hide the tooltip for that specific anchor. | -| `middlewares` | `Middleware[]` | no | | array of valid `floating-ui` middlewares | Allows for advanced customization. Check the [`floating-ui` docs](https://floating-ui.com/docs/middleware) for more information | -| `border` | CSS border | no | | a CSS border style | Change the style of the tooltip border (including the arrow) | -| `opacity` | CSS opacity | no | `0.9` | a CSS opacity value | Change the opacity of the tooltip | -| `arrowColor` | CSS color | no | | a CSS background color | Change color of the tooltip arrow | -| `arrowSize` | `number` | no | `8` | | Change the size of the tooltip arrow | -| `disableStyleInjection` | `boolean` or `'core'` | no | `false` | `true` `false` `'core'` | Whether to disable automatic style injection. Do not set dynamically. Check the [styling page](./examples/styling#disabling-reacttooltip-css) for more details | -| `role` | React.AriaRole | no | `tooltip` | `'tooltip'` `'dialog'` | Set ARIA role, either `tooltip` or `dialog` if the tooltip should contain focusable elements | diff --git a/docs/docs/troubleshooting.mdx b/docs/docs/troubleshooting.mdx deleted file mode 100644 index 5326ebdda..000000000 --- a/docs/docs/troubleshooting.mdx +++ /dev/null @@ -1,272 +0,0 @@ ---- -sidebar_position: 4 ---- - -# Troubleshooting - -Some tips on how to solve common issues with ReactTooltip. - -import { Tooltip } from 'react-tooltip' - -export const TooltipAnchor = ({ children, id, ...rest }) => { - return ( - - {children} - - ) -} - -:::info - -Before trying these, make sure you're running the latest ReactTooltip version with - -```sh -npm install react-tooltip@latest -``` - -or - -```sh -yarn add react-tooltip@latest -``` - -::: - -If you can't find your problem here, make sure there isn't [an open issue on GitHub](https://github.com/ReactTooltip/react-tooltip/issues) already covering it. -If there isn't, feel free to [submit a new issue here](https://github.com/ReactTooltip/react-tooltip/issues/new/choose). - -## The tooltip is broken/not showing up - -Make sure you've imported the default styling. You only need to do this once on your application and only if you are using a version before `5.13.0`, `App.jsx`/`App.tsx` is usually a good place to do it. - -```jsx -import 'react-tooltip/dist/react-tooltip.css' -``` - -If you've imported the default styling and the tooltip is still not showing up when you hover on your anchor element, make sure you have content to be displayed by the tooltip. - -If `data-tooltip-content` and `data-tooltip-html` are both unset (or they have empty values) on the anchor element, and also the `content`, `render`, and `children` props on the tooltip are unset (or have empty values), the tooltip is not shown by default. - -## The tooltip doesn't close - -This usually happens when you try to set the tooltip opacity via CSS. Due to the opacity being used internally to control the tooltip state, overriding it breaks functionality. - -Instead, use the `opacity` prop, or override the `--rt-opacity` CSS variable. See [the examples](./examples/styling#changing-the-opacity) for more details. - -```jsx - -``` - -or - -```css -:root { - --rt-opacity: 1; -} -``` - -### The tooltip doesn't close when using `closeEvents={{ click: true }}` - -Some HTML elements, such as the ``, can sometimes capture click events and not propagate them. If your anchor element contains an `` element, try setting `pointer-events: none;` on it. - -```jsx - -``` - -```css -.my-svg { - pointer-events: none; -} -``` - -## The border doesn't show for the arrow - -Simply setting the border for the tooltip through CSS will not work for the arrow. - -Instead, use [the `border` prop](./examples/styling#changing-the-border). - -```jsx - -``` - -## Bad performance - -If you're experiencing any kind of unexpected behavior or bad performance on your application when using ReactTooltip, here are a few things you can try. - -### Move `` on the DOM - -This is specially relevant when using components that are conditionally rendered. - -Always try to keep the `` component rendered, so if you're having issues with a tooltip you've placed inside a component which is placed/removed from the DOM dynamically, try to move the tooltip outside of it. - -We usually recommend placing the tooltip component directly inside the root component of your application (usually on `App.jsx`/`App.tsx`). - -### Dynamically generated anchor elements - -You should avoid needlessly using a large amount of `` components. One tooltip component that you use across your whole application should be good enough in most cases, but you should be fine to add a few more if you need to use different styled tooltips. - -Here's a simple example on how to improve performance when using dynamically generated items. - -:::info - -Check the examples for the [`anchorSelect`](./examples/anchor-select) and [`render`](./examples/render) props for more complex use cases. - -::: - -```jsx -// ❌ BAD -
- {myItems.map(({ id, content, tooltip }) => ( -
- {content} - -
- ))} -
-``` - -```jsx -// ✅ GOOD -
- { - myItems.map(({ id, content, tooltip }) => ( -
- {content} -
- )) - } -
- -``` - -## The tooltip doesn't work when using a Shadow DOM - -ReactTooltip currently does not support Shadow DOM usage, but it is on our roadmap. - -See [issue #1029](https://github.com/ReactTooltip/react-tooltip/issues/1029) and [PR #1068](https://github.com/ReactTooltip/react-tooltip/pull/1068) for more info. - - -## `Can't import the named export 'xxx' from non EcmaScript module (only default export is available)` - -:::info - -If you're running into this message on a project not using `webpack` or `react-scripts`, please [submit a bug report](https://github.com/ReactTooltip/react-tooltip/issues/new/choose) with information about your setup. - -::: - -### If you're using `webpack` - -This problem can be fixed by adding a rule to your `webpack.config.js` file. - -```js -module.exports = { - ... - module: { - rules: [ - { - test: /\.mjs$/, - include: /node_modules/, - type: 'javascript/auto', - } - ] - } -} -``` - -### If you're using `react-scripts` - -Try upgrading to the latest `react-scripts` version (v5.0.1 at the time of writing). - -```sh -npm i react-scripts@latest -``` - -or - -```sh -yarn add react-scripts@latest -``` - -## The tooltip component is `undefined` ([#1067](https://github.com/ReactTooltip/react-tooltip/issues/1067)) - -This might be related to an issue with `create-react-app` not supporting `.cjs` files, which is the default extension for the ReactTooltip dist file (`react-tooltip.min.cjs`). -See [`cra`'s issue #12700](https://github.com/facebook/create-react-app/issues/12700#issuecomment-1463040093) for the recommended way to fix this for all of your project dependencies. - -If you wish to only fix this for `react-tooltip`, see below. - -By default, your project will be importing the `react-tooltip.min.cjs` file. To workaround this, you must change the ReactTooltip `package.json` file (not the one on the root of your project!). -To do this, run the following inside your project directory: - -```sh -# if you're on Windows, just download the `.patch` file manually -wget https://github.com/ReactTooltip/react-tooltip/files/12195501/react-tooltip-1067.patch -git diff react-tooltip-1067.patch -``` - -This will apply the necessary changes (which you can check out for yourself). -The only problem with this approach is that reinstalling `react-tooltip`, or cloning your project into a new environment, means you'll have to apply the changes again. -For that reason, consider the [recommended solution](https://github.com/facebook/create-react-app/issues/12700#issuecomment-1463040093) mentioned above, or using [`patch-package`](https://www.npmjs.com/package/patch-package). - -## Next.js `TypeError: f is not a function` - -This problem seems to be caused by a bug related to the SWC bundler used by Next.js. -The best way to solve this is to upgrade to `next@13.3.0` or later versions. - -Less ideally, if you're unable to upgrade, you can set `swcMinify: false` on your `next.config.js` file. - -## Next.js `"use client"` error - -This normally happens when you use `react-tooltip` inside a component that is not tagged as client component. For more info, see the [Next.js docs](https://nextjs.org/docs/getting-started/react-essentials#client-components). - -To use `react-tooltip` on Next.js 13 without having to tag your component or page as a client component, just create a new file `ReactTooltip.tsx` (for this example, the file path is `src/components/ReactTooltip.tsx`) and place the following code inside of the created file: - -:::caution - -Avoid naming the file `react-tooltip.tsx` (or with whichever extension your project uses), since it may interfere with your editor's autocomplete functionality, and your bundling/compiling process. - -::: - -```jsx -// src/components/ReactTooltip.tsx -'use client' - -export { Tooltip } from 'react-tooltip' -``` - -When importing the tooltip: - -```jsx -// ❌ OLD -import { Tooltip } from 'react-tooltip' -``` - -```jsx -// ✅ NEW -import { Tooltip } from 'components/ReactTooltip' -``` diff --git a/docs/docs/upgrade-guide/_category_.json b/docs/docs/upgrade-guide/_category_.json deleted file mode 100644 index 73f8e0c81..000000000 --- a/docs/docs/upgrade-guide/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "Upgrade Guide", - "position": 2, - "link": { - "type": "generated-index", - "description": "Migration guide from V4 to V5." - } -} diff --git a/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx b/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx deleted file mode 100644 index 96a221405..000000000 --- a/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx +++ /dev/null @@ -1,151 +0,0 @@ ---- -sidebar_position: 4 ---- - -# Basic examples V4 -> V5 - -Examples of use in V4 -> V5. - -import { Tooltip } from 'react-tooltip' - -export const TooltipAnchor = ({ children, id, ...rest }) => { - return ( - - {children} - - ) -} - -The main changes you should be aware of is the new names for the data attributes. - -| V4 | V5 | -| ---------- | ---------------------- | -| `data-for` | `data-tooltip-id` | -| `data-tip` | `data-tooltip-content` | - -### V4 or less - -```jsx -import ReactTooltip from 'react-tooltip'; - - - ◕‿‿◕ - - -``` - -### V5 using data attributes - -```jsx -import { Tooltip } from 'react-tooltip'; - - - ◕‿‿◕ - - -``` - - - ◕‿‿◕ - - - -### V5 using tooltip props - -:::info - -Don't forget to check [the examples](../examples/basic-examples) for more details! - -::: - -```jsx -import { Tooltip } from 'react-tooltip'; - -◕‿‿◕ -◕‿‿◕ - -``` - -
- ◕‿‿◕ - ◕‿‿◕ -
- - ---- - -## Colors - -| V4 | V5 | -| ------ | --------- | -| `type` | `variant` | - -### V4 -> `type` - -```jsx -import ReactTooltip from 'react-tooltip'; - - ◕‿‿◕ - -``` - -### V5 -> `variant` - -Available values `'dark' | 'light' | 'success' | 'warning' | 'error' | 'info'` - -```jsx -import { Tooltip } from 'react-tooltip'; - - - ◕‿‿◕ - - -``` - - - ◕‿‿◕ - - - ---- - -See [all V5 options here](../options.mdx). diff --git a/docs/docs/upgrade-guide/changelog-v4-v5.md b/docs/docs/upgrade-guide/changelog-v4-v5.md deleted file mode 100644 index 599bbd61f..000000000 --- a/docs/docs/upgrade-guide/changelog-v4-v5.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Changelog V4 -> V5 - -If you are using V4 and want to upgrade to V5, you can see what changed below. - -## From V4 to V5 - -V4 was a great react tooltip component but was built a while ago using React class components, whick makes it hard to maintain, and for the community give contributions. - -With this in mind, we built a new version of ReactTooltip using [floating-ui](https://floating-ui.com/) behind the scenes. -This resulted in a great improvement in performance, and made it easier for the community to contribute to the project. - -## Improvements - -- Dropped package dependency `uuid` -- Dropped package dependency `prop-types` -- V5 is written in TypeScript -- V5 has minified and unminified files available to be used as you want - -## Breaking Changes - -- All data attributes are now prefixed with `data-tooltip-` -- Default Padding changed from `padding: 8px 21px;` to `padding: 8px 16px;` -- Exported module now is `Tooltip` instead of `ReactTooltip` -- If you already have a `Tooltip` component in your application and want to explicitly declare this as `ReactTooltip`, just `import { Tooltip as ReactTooltip } from "react-tooltip"` -- `data-for` attribute now is `data-tooltip-id` -- `data-tip` attribute now is `data-tooltip-content` -- `getContent` prop was removed. Instead, you can directly pass dynamic content to the `content` tooltip prop, or to `data-tooltip-content` in the anchor element, or use the new `render` tooltip prop -- Default behavior of tooltip now is equivalent to V4's `solid` effect, instead of `float`. The new `float` prop can be set to achieve V4's `effect="float"`. See [Options](../options.mdx) for more details - -## What about `ReactTooltip.rebuild()`? - -A common question V4 users have when upgrading to V5 is about `ReactTooltip.rebuild()`. -Rebuilding the tooltip was a required step when using V4 with dynamic content. It isn't necessary when using V5. - -The tooltip component now automatically watches for any changes made to the DOM and updates accordingly, without any extra steps needed. - -If you run into any problems with the tooltip not updating after changes are made in other components, please open a [GitHub issue](https://github.com/ReactTooltip/react-tooltip/issues/new/choose) reporting what you find, ideally with a sample [CodeSandbox](https://codesandbox.io/) (or something similar) to help us pinpoint the problem. - -## New Props - -- [x] `classNameArrow` -- [x] `openOnClick` - `boolean` - when set, the tooltip will open on click instead of on hover -- [x] `isOpen` - `boolean` (to control tooltip state) - if not used, tooltip state will be handled internally -- [x] `setIsOpen` - `function` (to control tooltip state) - if not used, tooltip state will be handled internally -- [x] `position` - `{ x: number; y: number }` - similar to V4's `overridePosition` -- [x] `float` - `boolean` - used to achieve V4's `effect="float"` -- [x] `hidden` - `boolean` - when set, the tooltip will not show -- [x] `render` - `function` - can be used to render dynamic content based on the active anchor element (check [the examples](../examples/render.mdx) for more details) -- [x] `closeOnEsc` - **DEPRECATED** - ~~`boolean` - when set, the tooltip will close after pressing the escape key~~ -- [x] `closeOnScroll` - **DEPRECATED** - ~~`boolean` - when set, the tooltip will close when scrolling (similar to V4's `scrollHide`)~~ -- [x] `closeOnResize` - **DEPRECATED** - ~~`boolean` - when set, the tooltip will close when resizing the window (same as V4's `resizeHide`)~~ - -:::note - -Use `globalCloseEvents` instead of `closeOnEsc`, `closeOnScroll`, and `closeOnResize`. See the [options page](../options.mdx#available-props) for more details. - -::: - -## `V4` props available in `V5` - -- [x] `children` -- [x] `place` - also available on anchor element as `data-tooltip-place` -- [ ] `type` - use `variant`. also available on anchor element as `data-tooltip-variant` -- [ ] `effect` - use `float` prop -- [x] `offset` - also available on anchor element as `data-tooltip-offset` -- [ ] `padding` - use `className` and custom CSS -- [ ] `multiline` - supported by default in `content` and `html` props -- [x] `border` -- [ ] `borderClass` - use `border` prop -- [ ] `textColor` - use `className` and custom CSS -- [ ] `backgroundColor` - use `className` and custom CSS -- [ ] `borderColor` - use `border` prop -- [x] `arrowColor` -- [ ] `arrowRadius` - use `className` and custom CSS -- [ ] `tooltipRadius` - use `className` and custom CSS -- [ ] `insecure` -- [x] `className` -- [x] `id` -- [x] `html` -- [x] `delayHide` - also available on anchor element as `data-delay-hide` -- [ ] `delayUpdate` - can be implemented if requested -- [x] `delayShow` - also available on anchor element as `data-delay-show` -- [x] `event` - functionality changed and renamed to `openEvents` -- [x] `eventOff` - functionality changed and renamed to `closeEvents` -- [ ] `isCapture` -- [x] `globalEventOff` - functionality changed and renamed to `globalCloseEvents` -- [ ] `getContent` - pass dynamic values to `content` instead -- [x] `afterShow` -- [x] `afterHide` -- [ ] `overridePosition` - use `position` -- [ ] `disable` -- [x] `scrollHide` - renamed to `closeOnScroll` -- [x] `resizeHide` - renamed to `closeOnResize` -- [x] `wrapper` - also available on anchor element as `data-tooltip-wrapper` -- [ ] `bodyMode` -- [x] `clickable` -- [x] `disableInternalStyle` - renamed to `disableStyleInjection` - -### Detailed informations - -- [The V5 pull request](https://github.com/ReactTooltip/react-tooltip/pull/820). - ---- - -Check [all V5 options here](../options.mdx). diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js deleted file mode 100644 index 74efcaba1..000000000 --- a/docs/docusaurus.config.js +++ /dev/null @@ -1,202 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies */ -/* eslint-disable @typescript-eslint/no-var-requires */ -/* eslint-disable max-len */ -// @ts-check -// Note: type annotations allow type checking and IDEs autocompletion - -const lightCodeTheme = require('prism-react-renderer/themes/github') -const darkCodeTheme = require('prism-react-renderer/themes/dracula') -const postcssPresetEnv = require('postcss-preset-env') - -/** @return {import('@docusaurus/types').Plugin} */ -function customPostCssPlugin() { - return { - name: 'custom-postcss', - configurePostCss(options) { - // Append new PostCSS plugins here. - options.plugins.push(postcssPresetEnv) // allow newest CSS syntax - return options - }, - } -} - -/** @type {import('@docusaurus/types').Config} */ -const config = { - title: 'React Tooltip', - tagline: 'Awesome React Tooltip component', - url: 'https://react-tooltip.com', - baseUrl: '/', - onBrokenLinks: 'throw', - onBrokenMarkdownLinks: 'warn', - favicon: 'img/favicon.ico', - - // GitHub pages deployment config. - // If you aren't using GitHub pages, you don't need these. - organizationName: 'ReactTooltip', // Usually your GitHub org/user name. - projectName: 'ReactTooltip', // Usually your repo name. - - // Even if you don't use internalization, you can use this field to set useful - // metadata like html lang. For example, if your site is Chinese, you may want - // to replace "en" with "zh-Hans". - i18n: { - defaultLocale: 'en', - locales: ['en'], - }, - - plugins: [customPostCssPlugin], - - scripts: [ - // { - // src: 'https://securepubads.g.doubleclick.net/tag/js/gpt.js', - // async: true, - // }, - // { - // src: '/js/gpt.js', - // async: true, - // }, - // { - // src: '/js/ads.js', - // async: true, - // }, - ], - - presets: [ - [ - 'classic', - /** @type {import('@docusaurus/preset-classic').Options} */ - ({ - docs: { - sidebarPath: require.resolve('./sidebars.js'), - // Please change this to your repo. - // Remove this to remove the "edit this page" links. - editUrl: 'https://github.com/ReactTooltip/react-tooltip/tree/master/docs/', - }, - // blog: { - // showReadingTime: true, - // // Please change this to your repo. - // // Remove this to remove the "edit this page" links. - // editUrl: - // 'https://github.com/ReactTooltip/react-tooltip/tree/master/docs/', - // }, - theme: { - customCss: require.resolve('./src/css/custom.css'), - }, - // gtag: { - // trackingID: 'G-N15QWWS0MW', - // anonymizeIP: false, - // }, - googleTagManager: { - containerId: 'GTM-TH6VNCW', - }, - }), - ], - ], - - themeConfig: - /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ - ({ - announcementBar: { - id: 'support_us', - content: - '⭐️ If you like ReactTooltip, give it a star on GitHub ⭐️', - backgroundColor: '#222', - textColor: '#fff', - isCloseable: false, - }, - algolia: { - // The application ID provided by Algolia - appId: 'CQB0RZ7E1F', - - // Public API key: it is safe to commit it - apiKey: '97b68f94056a6d6fad56df43bf178866', - - indexName: 'react-tooltip', - - // Optional: see doc section below - contextualSearch: true, - - // Optional: Specify domains where the navigation should occur through window.location instead on history.push. Useful when our Algolia config crawls multiple documentation sites and we want to navigate with window.location.href to them. - // externalUrlRegex: 'external\\.com|domain\\.com', - - // Optional: Algolia search parameters - // searchParameters: {}, - - // Optional: path for search page that enabled by default (`false` to disable it) - searchPagePath: 'search', - - // ... other Algolia params - }, - navbar: { - title: 'React Tooltip', - logo: { - alt: 'React Tooltip Logo', - src: 'img/only-tooltip.svg', - width: 120, - }, - items: [ - { - type: 'doc', - docId: 'getting-started', - position: 'left', - label: 'Docs', - }, - { - href: 'https://github.com/ReactTooltip/react-tooltip/', - label: 'GitHub', - position: 'right', - }, - ], - }, - footer: { - style: 'dark', - links: [ - { - title: 'Docs', - items: [ - { - label: 'Getting Started', - to: '/docs/getting-started', - }, - { - label: 'Deploying to DigitalOcean', - to: '/blog/digital-ocean-app-platform', - }, - ], - }, - // { - // title: 'Community', - // items: [ - // { - // label: 'Stack Overflow', - // href: 'https://stackoverflow.com/questions/tagged/docusaurus', - // }, - // { - // label: 'Discord', - // href: 'https://discordapp.com/invite/docusaurus', - // }, - // { - // label: 'Twitter', - // href: 'https://twitter.com/docusaurus', - // }, - // ], - // }, - { - title: 'More', - items: [ - { - label: 'GitHub', - href: 'https://github.com/ReactTooltip/react-tooltip/', - }, - ], - }, - ], - copyright: `Copyright © ${new Date().getFullYear()} React Tooltip. Docs built with Docusaurus.`, - }, - prism: { - theme: lightCodeTheme, - darkTheme: darkCodeTheme, - }, - }), -} - -module.exports = config diff --git a/docs/package.json b/docs/package.json deleted file mode 100644 index 186b5951c..000000000 --- a/docs/package.json +++ /dev/null @@ -1,49 +0,0 @@ -{ - "name": "react-tooltip-docs", - "version": "0.0.0", - "private": true, - "scripts": { - "docusaurus": "docusaurus", - "start": "docusaurus start", - "build": "docusaurus build", - "swizzle": "docusaurus swizzle", - "deploy": "docusaurus deploy", - "clear": "docusaurus clear", - "serve": "docusaurus serve", - "write-translations": "docusaurus write-translations", - "write-heading-ids": "docusaurus write-heading-ids", - "typecheck": "tsc" - }, - "dependencies": { - "@docusaurus/core": "2.4.3", - "@docusaurus/preset-classic": "2.4.3", - "@mdx-js/react": "1.6.22", - "clsx": "^1.2.1", - "prism-react-renderer": "^1.3.5", - "raw-loader": "^4.0.2", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-tooltip": "5.23.0" - }, - "devDependencies": { - "@docusaurus/module-type-aliases": "^2.4.1", - "@tsconfig/docusaurus": "^1.0.5", - "postcss-preset-env": "^9.3.0", - "typescript": "4.9.5" - }, - "browserslist": { - "production": [ - ">0.5%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, - "engines": { - "node": ">=16.14 <17.x" - } -} diff --git a/docs/react-app-env.d.ts b/docs/react-app-env.d.ts deleted file mode 100644 index 5afd25105..000000000 --- a/docs/react-app-env.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -declare module '*.png' -declare module '*.svg' -declare module '*.jpeg' -declare module '*.jpg' -declare module '*.webp' diff --git a/docs/sidebars.js b/docs/sidebars.js deleted file mode 100644 index f3303339e..000000000 --- a/docs/sidebars.js +++ /dev/null @@ -1,33 +0,0 @@ -/** - * Creating a sidebar enables you to: - - create an ordered group of docs - - render a sidebar for each doc of that group - - provide next/previous navigation - - The sidebars can be generated from the filesystem, or explicitly defined here. - - Create as many sidebars as you want. - */ - -// @ts-check - -/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ -const sidebars = { - // By default, Docusaurus generates a sidebar from the docs folder structure - tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }], - - // But you can create a sidebar manually - /* - tutorialSidebar: [ - 'intro', - 'hello', - { - type: 'category', - label: 'Tutorial', - items: ['tutorial-basics/create-a-document'], - }, - ], - */ -} - -module.exports = sidebars diff --git a/docs/src/components/AdsContainer/index.tsx b/docs/src/components/AdsContainer/index.tsx deleted file mode 100644 index 26ffe3782..000000000 --- a/docs/src/components/AdsContainer/index.tsx +++ /dev/null @@ -1,17 +0,0 @@ -/* eslint-disable import/no-unresolved */ -import React from 'react' -import AdsContainerElement from '@site/src/components/AdsContainerElement' -import BannerSponsor from '@site/src/components/BannerSponsor' -import './styles.css' - -const AdsContainer = () => { - return ( -
- - - {/* */} -
- ) -} - -export default AdsContainer diff --git a/docs/src/components/AdsContainer/styles.css b/docs/src/components/AdsContainer/styles.css deleted file mode 100644 index 17836b0f2..000000000 --- a/docs/src/components/AdsContainer/styles.css +++ /dev/null @@ -1,14 +0,0 @@ -.fixed { - position: fixed; -} - -.ads-container { - display: flex; - flex-direction: column; - gap: 5px; - - #carbonads { - width: 100%; - max-width: 341px; - } -} diff --git a/docs/src/components/AdsContainerElement/index.tsx b/docs/src/components/AdsContainerElement/index.tsx deleted file mode 100644 index d60a6d99e..000000000 --- a/docs/src/components/AdsContainerElement/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React, { useEffect, useRef } from 'react' -import './styles.css' - -const AdsContainerElement = () => { - const containerRef = useRef() - - useEffect(() => { - if (typeof window !== 'undefined') { - const scriptElement = document.createElement('script') - scriptElement.src = '//cdn.carbonads.com/carbon.js?serve=CWYD553L&placement=react-tooltipcom' - scriptElement.id = '_carbonads_js' - scriptElement.async = true - - if (containerRef?.current) { - containerRef.current.innerHTML = '' - containerRef.current.appendChild(scriptElement) - } - } - }, []) - - return
-} - -export default AdsContainerElement diff --git a/docs/src/components/AdsContainerElement/styles.css b/docs/src/components/AdsContainerElement/styles.css deleted file mode 100644 index fe56f7f75..000000000 --- a/docs/src/components/AdsContainerElement/styles.css +++ /dev/null @@ -1,86 +0,0 @@ -.carbon-ads { - display: grid; - row-gap: 16px; -} - -.carbon-ads > div * { - margin: initial; - padding: initial; - line-height: initial; -} - -.carbon-ads > div { - --carbon-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, - Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif; - --carbon-font-size: 14px; - --carbon-padding: 1.5ch; - --carbon-max-char: 20ch; - --carbon-bg-primary: hsl(0, 0%, 98%); - --carbon-bg-secondary: hsl(0, 0%, 92%); - --carbon-text-color: hsl(0, 0%, 20%); - z-index: 10; - font-size: var(--carbon-font-size); - font-family: var(--carbon-font-family); -} - -.carbon-ads > div > span { - display: flex; - flex-direction: column; - min-inline-size: 130px; - max-inline-size: calc(130px + var(--carbon-max-char) + 8ch); - padding: var(--carbon-padding); - gap: var(--carbon-padding); - background-color: var(--carbon-bg-primary); - box-shadow: 0 0 1px hsl(0deg 0% 0% / 0.085), 0 0 2px hsl(0deg 0% 0% / 0.085), - 0 0 4px hsl(0deg 0% 0% / 0.085), 0 0 8px hsl(0deg 0% 0% / 0.085); -} - -.carbon-ads > div a { - color: var(--carbon-text-color); - text-decoration: none; -} - -.carbon-ads > div a:hover { - color: var(--carbon-text-color); -} - -.carbon-ads > div .carbon-wrap { - display: flex; - flex-wrap: wrap; - gap: 1.5ex; -} - -.carbon-ads > div .carbon-img { - flex: 0 0 130px; -} - -.carbon-ads > div .carbon-img img { - display: block; -} - -.carbon-ads > div .carbon-text { - flex-grow: 1; - flex-basis: var(--carbon-max-char); - line-height: 1.4; - text-align: left; -} - -.carbon-ads > div .carbon-poweredby { - padding: 6px 8px; - background: var(--carbon-bg-secondary); - color: var(--carbon-text-color); - font-weight: 600; - font-size: 0.6em; - line-height: 1.4; - letter-spacing: 0.2ch; - text-align: center; - text-transform: uppercase; -} - -@media (prefers-color-scheme: dark) { - .carbon-ads > div { - --carbon-bg-primary: hsl(0, 0%, 12%); - --carbon-bg-secondary: hsl(0, 0%, 15%); - --carbon-text-color: hsl(0, 0%, 90%); - } -} diff --git a/docs/src/components/BannerSponsor/index.tsx b/docs/src/components/BannerSponsor/index.tsx deleted file mode 100644 index 527cf6ca5..000000000 --- a/docs/src/components/BannerSponsor/index.tsx +++ /dev/null @@ -1,60 +0,0 @@ -/* eslint-disable import/no-unresolved */ -import React from 'react' -// @ts-ignore -import LogoFrigade from '@site/static/img/sponsors/frigade.png' -import './styles.css' - -declare global { - interface Window { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - dataLayer?: any - } -} - -const SPONSORS = { - frigade: { - logo: LogoFrigade, - title: 'Frigade', - href: 'https://frigade.com/', - }, -} - -interface BannerSponsorProps { - sponsorKey: keyof typeof SPONSORS - tier: 'gold' | 'silver' -} - -const BannerSponsor = ({ sponsorKey, tier }: BannerSponsorProps) => { - const sponsor = SPONSORS[sponsorKey] - - const onClickSponsorBannerEventHandler = () => { - if (typeof window !== 'undefined') { - window.dataLayer = window.dataLayer || [] - - window.dataLayer.push({ - event: `click_sponsor_banner`, - place: 'sidebar', - sponsorKey, - sponsorTitle: sponsor.title, - }) - } - - return true - } - - return ( -
- - {sponsor.title} - -
- ) -} - -export default BannerSponsor diff --git a/docs/src/components/BannerSponsor/styles.css b/docs/src/components/BannerSponsor/styles.css deleted file mode 100644 index 9323ab5c3..000000000 --- a/docs/src/components/BannerSponsor/styles.css +++ /dev/null @@ -1,21 +0,0 @@ -.sponsor-banner { - /* same as `--carbon-max-char` */ - --sponsor-max-char: 20ch; - display: flex; - flex-direction: column; - min-inline-size: 130px; - max-inline-size: calc(130px + var(--sponsor-max-char) + 8ch); - height: fit-content; - - a { - display: flex; - } -} - -.sponsor-banner-gold { - max-width: 341px; -} - -.sponsor-banner-silver { - max-width: 163px; -} diff --git a/docs/src/components/HomepageFeatures/index.tsx b/docs/src/components/HomepageFeatures/index.tsx deleted file mode 100644 index 70caddc8a..000000000 --- a/docs/src/components/HomepageFeatures/index.tsx +++ /dev/null @@ -1,79 +0,0 @@ -/* eslint-disable react/require-default-props */ -/* eslint-disable import/no-unresolved */ -/* eslint-disable @typescript-eslint/no-var-requires */ -/* eslint-disable global-require */ -import React from 'react' -import clsx from 'clsx' -import styles from './styles.module.css' - -type FeatureItem = { - title: string - Svg: React.ComponentType> - description: JSX.Element - allowsDarkMode?: boolean -} - -const FeatureList: FeatureItem[] = [ - { - title: 'Easy to Use', - Svg: require('@site/static/img/only-tooltip-top.svg').default, - description: ( - <>ReactTooltip was designed with love from the ground up to be easily installed and used. - ), - }, - { - title: 'Open Source', - Svg: require('@site/static/img/github.svg').default, - description: ( - <> - An Open Source project built by developers to developers, we work together with the - community to always try to improve ReactTooltip. - - ), - allowsDarkMode: true, - }, - { - title: 'Focus on What Matters', - Svg: require('@site/static/img/happy-face-tooltip.svg').default, - description: ( - <> - Don’t waste your time building a tooltip component from scratch, just use ReactTooltip - and focus on new features or bug fixes. - - ), - }, -] - -function Feature({ title, Svg, description, allowsDarkMode }: FeatureItem) { - return ( -
-
- -
-
-

{title}

-

{description}

-
-
- ) -} - -export default function HomepageFeatures(): JSX.Element { - return ( -
-
-
- {FeatureList.map((props, idx) => ( - // eslint-disable-next-line react/no-array-index-key - - ))} -
-
-
- ) -} diff --git a/docs/src/components/HomepageFeatures/styles.module.css b/docs/src/components/HomepageFeatures/styles.module.css deleted file mode 100644 index a7268eded..000000000 --- a/docs/src/components/HomepageFeatures/styles.module.css +++ /dev/null @@ -1,15 +0,0 @@ -.features { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; -} - -.featureSvg { - height: 200px; - width: 200px; -} - -html[data-theme='dark'] .svgDarkMode { - fill: #fff; -} diff --git a/docs/src/components/HomepageSponsored/index.tsx b/docs/src/components/HomepageSponsored/index.tsx deleted file mode 100644 index 03b978800..000000000 --- a/docs/src/components/HomepageSponsored/index.tsx +++ /dev/null @@ -1,165 +0,0 @@ -/* eslint-disable react/require-default-props */ -/* eslint-disable import/no-unresolved */ -/* eslint-disable @typescript-eslint/no-var-requires */ -/* eslint-disable global-require */ -import React from 'react' -import clsx from 'clsx' -import styles from './styles.module.css' - -type FeatureItem = { - title: string - Svg?: React.ComponentType> - // eslint-disable-next-line @typescript-eslint/no-explicit-any, react/no-unused-prop-types - src?: any - // eslint-disable-next-line react/no-unused-prop-types - eventTitle?: string - link: string - allowsDarkMode?: boolean - extraLink?: string -} - -type SponsorItem = FeatureItem & { - tier: 'gold' | 'silver' -} - -const FeatureList: FeatureItem[] = [ - { - title: 'Digital Ocean', - Svg: require('@site/static/img/digital-ocean-powered-by.svg').default, - link: 'https://www.digitalocean.com/?refcode=0813b3be1161&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge', - extraLink: '/blog/digital-ocean-app-platform', - }, - { - title: 'Algolia', - Svg: require('@site/static/img/Algolia-logo.svg').default, - link: 'https://docsearch.algolia.com/', - allowsDarkMode: true, - }, -] - -const SponsorList: SponsorItem[] = [ - { - title: 'Frigade', - src: require('@site/static/img/sponsors/frigade.png').default, - link: 'https://frigade.com/?source=react-tooltip', - eventTitle: 'frigade', - tier: 'gold', - }, - // { - // title: 'Slot', - // src: require('@site/static/img/sponsors/slot.png').default, - // link: '#', - // eventTitle: 'slot', - // tier: 'silver', - // }, -] - -function Feature({ title, Svg, link, allowsDarkMode, extraLink }: FeatureItem) { - return ( -
-
- - - - {extraLink && ( - - Learn more about {title} - - )} -
-
- ) -} - -export default function HomepageSponsored(): JSX.Element { - const onClickSponsorBannerEventHandler = (title: string) => { - if (typeof window !== 'undefined') { - window.dataLayer = window.dataLayer || [] - - window.dataLayer.push({ - event: `click_${title}_banner`, - place: 'home', - }) - } - - return true - } - - const goldSponsors = SponsorList.filter(({ tier }) => tier === 'gold') - const silverSponsors = SponsorList.filter(({ tier }) => tier === 'silver') - - return ( -
-
-
-
-

Gold Sponsors 🌟

-
- {goldSponsors.map(({ link, title, src, eventTitle }, idx) => ( - // eslint-disable-next-line react/no-array-index-key - - ))} -
-
-
-

Silver Sponsors ✪

-
- {silverSponsors.map(({ link, title, src, eventTitle }, idx) => ( - // eslint-disable-next-line react/no-array-index-key - - ))} -
-
-
-
-
-

Powered by

-
- {FeatureList.map((props, idx) => ( - // eslint-disable-next-line react/no-array-index-key - - ))} -
-
-
- ) -} diff --git a/docs/src/components/HomepageSponsored/styles.module.css b/docs/src/components/HomepageSponsored/styles.module.css deleted file mode 100644 index 51e2dd39a..000000000 --- a/docs/src/components/HomepageSponsored/styles.module.css +++ /dev/null @@ -1,40 +0,0 @@ -.features { - display: flex; - flex-direction: column; - gap: 25px; -} - -.featureSvg { - height: 200px; - width: 200px; -} - -.sponsoredTitle { - display: flex; - justify-content: center; -} - -.sponsoredBy { - display: flex; - flex-direction: column; - gap: 21px; -} - -.feature-item { - display: flex; - flex-direction: column; -} - -@media screen and (min-width: 1024px) { - .features { - display: flex; - align-items: center; - flex-direction: row; - padding: 2rem 0; - width: 100%; - } -} - -html[data-theme='dark'] .svgDarkMode { - fill: #fff; -} diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css deleted file mode 100644 index fe79edce5..000000000 --- a/docs/src/css/custom.css +++ /dev/null @@ -1,102 +0,0 @@ -/** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. - */ - -/* You can override the default Infima variables here. */ -:root { - --ifm-color-primary: #004285; - --ifm-color-primary-dark: #003b78; - --ifm-color-primary-darker: #003871; - --ifm-color-primary-darkest: #002e5d; - --ifm-color-primary-light: #004992; - --ifm-color-primary-lighter: #004c99; - --ifm-color-primary-lightest: #0056ad; - --ifm-code-font-size: 95%; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); -} -/* :root { - --ifm-color-primary: #2e8555; - --ifm-color-primary-dark: #29784c; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; - --ifm-color-primary-light: #33925d; - --ifm-color-primary-lighter: #359962; - --ifm-color-primary-lightest: #3cad6e; - --ifm-code-font-size: 95%; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); -} */ - -/* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme='dark'] { - --ifm-color-primary: #70b8ff; - --ifm-color-primary-dark: #4ba6ff; - --ifm-color-primary-darker: #399dff; - --ifm-color-primary-darkest: #0281ff; - --ifm-color-primary-light: #95caff; - --ifm-color-primary-lighter: #a7d3ff; - --ifm-color-primary-lightest: #deefff; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); -} - -/* [data-theme='dark'] { - --ifm-color-primary: #25c2a0; - --ifm-color-primary-dark: #21af90; - --ifm-color-primary-darker: #1fa588; - --ifm-color-primary-darkest: #1a8870; - --ifm-color-primary-light: #29d5b0; - --ifm-color-primary-lighter: #32d8b4; - --ifm-color-primary-lightest: #4fddbf; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); -} */ - -/** styling examples **/ -.example-container .example { - color: #222; - background-color: rgb(0, 247, 255); -} - -.example-container .example-orange { - color: #222; - background-color: rgb(255, 153, 0); -} - -.example-container .example-pink { - color: #fff; - background-color: rgb(255, 0, 255); -} - -.example-container .example-diff-arrow { - color: #fff; - background-color: rgb(55, 55, 55); -} - -.example-container .example-diff-arrow .example-arrow { - background-color: rgb(222, 34, 72); -} - -.example-container .example-no-radius { - border-radius: 0; -} - -.example-container .example-rounded { - border-radius: 50%; -} - -.example-container .example-no-padding { - padding: 0; -} - -.example-container .example-padding { - padding: 48px; -} - -.adsanchor { - bottom: 0; - display: block; - position: fixed; - width: 100%; - max-height: 100px; - height: 75px; -} diff --git a/docs/src/pages/blog/digital-ocean-app-platform.tsx b/docs/src/pages/blog/digital-ocean-app-platform.tsx deleted file mode 100644 index a8ab6e903..000000000 --- a/docs/src/pages/blog/digital-ocean-app-platform.tsx +++ /dev/null @@ -1,207 +0,0 @@ -/* eslint-disable jsx-a11y/anchor-is-valid */ -/* eslint-disable import/no-unresolved */ -import React from 'react' -import Layout from '@theme/Layout' -import DigitalOceanBanner from '@site/static/img/digital-ocean-banner.webp' -import DigitalOceanLogin from '@site/static/img/digital-ocean-login.webp' -import DigitalOceanCreateApp from '@site/static/img/digital-ocean-create-app.webp' -import DigitalOceanAppConfig1 from '@site/static/img/digital-ocean-app-config-1.png' -import DigitalOceanAppConfig2 from '@site/static/img/digital-ocean-app-config-2.png' -import DigitalOceanStaticSite from '@site/static/img/digital-ocean-static-site.png' -import DigitalOceanCreateResource from '@site/static/img/digital-ocean-create-resource.png' -import { Tooltip } from 'react-tooltip' - -export default function Home(): JSX.Element { - return ( - -
-
- DigitalOcean banner - -

How to Deploy a Static Site on DigitalOcean

-

- This guide walks you through deploying a static React site + React-Tooltip library, - using DigitalOcean's App Platform. Follow these steps to get your site live quickly - and easy! -

- -
-

Examples of Using React-Tooltip

-

1. Basic Tooltip

-

This example demonstrates a simple tooltip:

- -
-              {`import {Tooltip} from 'react-tooltip';\n\n◕‿‿◕\n\n`}
-            
- For more examples, check out the{' '} - - React-Tooltip documentation. - -
- -

1. Uploading the project to GitHub

-

- Your project needs to be hosted on GitHub for easy integration with DigitalOcean. - Here's how to do it: -

-
    -
  1. Create a new repository on GitHub and copy the repository URL.
  2. -
  3. - In your terminal, add the GitHub repository as a remote in your project folder: -
    -                git remote add origin https://github.com/your-username/your-repo.git
    -              
    -
  4. -
  5. - Commit any pending changes and push your code to the main branch: -
    -                git add .{'\n'}
    -                git commit -m "Initial commit"{'\n'}
    -                git push -u origin main
    -              
    -
  6. -
- -

2. Setting up DigitalOcean App Platform

-

DigitalOcean App Platform makes it easy to deploy static sites. Follow these steps:

-
    -
  1. - Log in to your{' '} - - DigitalOcean - {' '} - account or sign up for a new account. - DigitalOcean Login -
  2. -
  3. - On the dashboard, click Create and select Apps. - DigitalOcean Create App -
  4. -
  5. - Connect your GitHub account to DigitalOcean by following the on-screen instructions. -
  6. -
  7. - Select your repository and branch. Usually, the main branch is used for - production. - DigitalOcean App config pt.1 -
  8. -
  9. - Specify the build output directory as build/, which is the default output - folder for React projects. - DigitalOcean App config pt.2 -
  10. -
  11. - Choose your deployment plan. You can have up to 3 static sites on free tier. - DigitalOcean Static Site -
  12. -
  13. - Click Create Resources and wait for the process to complete. - DigitalOcean Create Resource -
  14. -
- -

- After the deployment finishes, DigitalOcean will provide a URL for your live site. Visit - this URL and enjoy your live site! -

- -

Support

-

If you run into any issues, refer to:

- -
-
-
- ) -} diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css deleted file mode 100644 index b54e4f88b..000000000 --- a/docs/src/pages/index.module.css +++ /dev/null @@ -1,48 +0,0 @@ -/** - * CSS files with the .module.css suffix will be treated as CSS modules - * and scoped locally. - */ - -.heroBanner { - padding: 4rem 0; - text-align: center; - position: relative; - overflow: hidden; - display: flex; - flex-direction: column; -} - -.heroContainer { - display: flex; - flex-direction: column; - align-items: center; -} - -.heroAds { - padding-top: 2rem; - min-height: 196px; -} - -@media screen and (max-width: 996px) { - .heroBanner { - padding: 2rem; - } -} - -.buttons { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - row-gap: 16px; -} - -@media screen and (min-width: 768px) { - .buttons { - display: flex; - align-items: center; - justify-content: center; - flex-direction: row; - column-gap: 16px; - } -} diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx deleted file mode 100644 index e14637eed..000000000 --- a/docs/src/pages/index.tsx +++ /dev/null @@ -1,51 +0,0 @@ -/* eslint-disable import/no-unresolved */ -import React from 'react' -import clsx from 'clsx' -import Link from '@docusaurus/Link' -import useDocusaurusContext from '@docusaurus/useDocusaurusContext' -import Layout from '@theme/Layout' -import HomepageFeatures from '@site/src/components/HomepageFeatures' -import HomepageSponsored from '@site/src/components/HomepageSponsored' -import AdsContainerElement from '@site/src/components/AdsContainerElement' - -import styles from './index.module.css' - -function HomepageHeader() { - const { siteConfig } = useDocusaurusContext() - return ( -
-
-

{siteConfig.title}

-

- Happy face with a tooltip saying 'Hello I'm a tooltip' -

-

{siteConfig.tagline}

-
- - Upgrade from V4 to V5 - - - Getting Started with V5 - -
-
-
- -
-
- ) -} - -export default function Home(): JSX.Element { - // const { siteConfig } = useDocusaurusContext() - return ( - // - - -
- - -
-
- ) -} diff --git a/docs/src/theme/Footer/index.js b/docs/src/theme/Footer/index.js deleted file mode 100644 index 1d3ac8869..000000000 --- a/docs/src/theme/Footer/index.js +++ /dev/null @@ -1,30 +0,0 @@ -/* eslint-disable import/no-unresolved */ -import React from 'react' -import Footer from '@theme-original/Footer' -// import AdsContainerElement from '@site/src/components/AdsContainerElement' - -export default function FooterWrapper(props) { - // useEffect(() => { - // if (typeof window !== 'undefined') { - // const scriptElement = document.createElement('script') - // scriptElement.src = - // 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7420210265158247' - // scriptElement.async = true - // scriptElement.onload = () => { - // if (typeof window !== 'undefined') { - // window.onload = () => { - // ;(window.adsbygoogle = window.adsbygoogle || []).push({}) - // } - // } - // } - // document.body.appendChild(scriptElement) - // } - // }, []) - - return ( - <> -