Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can we change the clipPath height using any props #592

Open
aliabbas-2012 opened this issue Oct 11, 2023 · 3 comments
Open

How can we change the clipPath height using any props #592

aliabbas-2012 opened this issue Oct 11, 2023 · 3 comments

Comments

@aliabbas-2012
Copy link

image
Hello I am not able to change the height of clipPath and <rect x="0" y="0" width="1846" height="15"></rect>
Because my top navbar is fixed every time the first step overlaps navbar

My code is

import React, { useEffect } from 'react';
import { useRouter } from 'next/router';
import { useLocalStorage } from 'react-use';
import { useTranslate } from '@hooks';
import { getTourSteps } from '@data';
import Loadable from 'react-loadable';

const Component = Loadable({
  loader: () => import('reactour'),
  loading: () => null,
});

const Tour = ({ isOpen, onToggle }) => {
  const { tHtml } = useTranslate('common');
  const router = useRouter();
  const [key, steps] = getTourSteps(router.pathname, tHtml);
  const [value, setValue] = useLocalStorage(`tour-${key}`, 'false');

  const doNothing = () => {};

  const disableBody = () => {
    document.body.classList.add('tour-on');
  };

  const handleClose = () => {
    document.body.classList.remove('tour-on');
    onToggle();
    setValue('true');
  };

  useEffect(() => {
    if (!isOpen && value === 'false') onToggle();
  }, [value, onToggle, isOpen]);

  return (
    !!steps &&
    isOpen && (
      <Component
        closeWithMask={false}
        disableInteraction
        rounded={4}
        steps={steps}
        isOpen={isOpen}
        onRequestClose={handleClose}
        onClickMask={doNothing}
        onClickHighlighted={doNothing}
        onAfterOpen={disableBody}
        padding={{ 
          mask: 10, 
          popover: [5, 10], 
          wrapper: [10,50,0,0] 
        }}
      />
    )
  );
};

export default Tour;

I provided the padding but its not working

@elrumordelaluz
Copy link
Owner

Hi @aliabbas-2012, thanks for open the Issue.

Mind creating a minimal reproduction in a sandbox in order to allow others to debug faster your use-case and try to find a solution?
Thanks!

@aliabbas-2012
Copy link
Author

aliabbas-2012 commented Oct 16, 2023

Hi @elrumordelaluz , would you like more clarification, or should we create a pull request?

@elrumordelaluz
Copy link
Owner

Hi @elrumordelaluz , would you like more clarification, or should we create a pull request?

a minimal reproduction of your issue / use-case in a sandbox if possible

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants