Applying custom transformation on popper about react-popper HOT 4 CLOSED

Thanks for the quick reply @FezVrasta, and thank you for pointing me in the right direction. This helped me achieve what I wanted. However I did get to it only after a bit of trial and error. For example, what eventually worked for me was this:

const myExampleModifier = {
	enabled: true,
	order: 860,
	fn: (data: any) => {
		const isVisible = this.state.isVisible;

		const left = Math.floor(data.popper.left);
		const top = Math.floor(data.popper.top);
		const newTop = isVisible ? top : top - 10; // Change the top position if popper is hidden

		const transform = `translate3d(${left}px, ${newTop}px, 0px)`;

		// Update popper, offsets and styles object
		const popper = {...data.popper, left, top: newTop};
		const offsets = {...data.offsets, popper};
		const styles = {...data.styles, opacity, transform};

		return {...data, offsets, styles};
	}
};

What I did not understand is why it was necessary for me to change the offsets and styles objects to make this work? Is this the correct way I should go to achieve the desired effect? Sorry for the vague question - I am just making sure I am not missing anything as I am still studying this library :)

Thank you for your help.

from react-popper.

Yes sure,

here is where Popper.js computes the styles that need to be applied to the popper element.

After that, the applyStyle is just going to set the styles that have been computed in the previous step.

react-popper replaces the applyStyle modifier with its own React specific code

You can then inject a custom modifier after computeStyles that replaces the value of the data.styles.transform with whatever you prefer.

from react-popper.

Bueller? Would be great to know if the solution is a hack or considered idiomatic. :)

from react-popper.

the modifier system is at the core of Popper.js, feel free to use it, definitely not an hack!

from react-popper.