streakyc / react-float-anchor Goto Github PK
View Code? Open in Web Editor NEWReact component for positioning an element aligned to another
License: MIT License
React component for positioning an element aligned to another
License: MIT License
One use-case of react-float-anchor is to show a tooltip over another element. Some tooltip designs include an arrow from the tooltip to the original element. In order to place the arrow, you need to know how the tooltip was placed relative to the element. ReactFloatAnchor didn't provide a way to handle this at all before version 3.3.0.
In version 3.3.0, you can now pass a callback as the float prop which will receive the return value of contain-by-screen, which contains information (the "Choice" value) about how the float prop was positioned.
One problem with this is that contain-by-screen isn't called until after the initial render, so the initial render has to pass null to the float callback as the choice value, and then immediately re-render with the choice from contain-by-screen. (ReactFloatAnchor is smart enough to only do this immediate re-render when the user has passed a callback as the float prop, so users not using the feature aren't affected.)
This could be solved by having a separate "tooltip" prop which may be a function that takes a choice and returns a React node, and making it so this tooltip is only rendered after the float has been positioned.
It's also possible to make ReactFloatAnchor support positioning the tooltip itself, rather than just exposing the choice value from contain-by-screen and expecting the user to position the tooltip using that.
Hi @agentme,
I'm fighting an issue with react-float-anchor
on IE11, there's an uncaught exception fired here:
this._portalRemoval.take(1).onValue(function () {
portalEl.rfaAnchor = undefined;
_this3.portal = null;
_reactDom2.default.unmountComponentAtNode(portalEl);
portalEl.remove();
_this3._portalEl = null;
});
=> Object doesn't support property or method 'remove' (from portalEl.remove();
)
Explanation: https://stackoverflow.com/questions/20428877/javascript-remove-doesnt-work-in-ie
Would you consider patching it and make a test run on IE11?
With StackBlitz and codesandbox, React 18 is now the default in react templates.
When trying to use react-float-anchor and react-18, Should not happen: portalEl already in page
happens in this example from react-menu-list. https://stackblitz.com/edit/react-ts-xqmbow?file=App.tsx when the <input>
element is focused.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.