floating ui - a js library for floating elements such as popover and dropdown

this is a cool library which an be used for tooltips, menu btn activator etc 

https://floating-ui.com/

https://floating-ui.com/docs/react-examples

Comments

Post a Comment

Popular posts from this blog

My Reading Lists

I had some time over Christmas and decided to organize my reading lists. Interesting how some time away from daily work allows one to raise up your head   Uncle Bob on Principles of OOd See also book: Agile Principles, Patterns, and Practices in C# Available on Safari Books online. Algorithms in a Nutshell Nine   Algorithms   That Changed   the Future Programming Pearls book: http://www.cs.bell-labs.com/cm/cs/pearls/toc.html 97 Things Every Programmer Should Know Seven L a nguages http://pragprog.com/book/btlang/seven-languages-in-seven-weeks Codys book : http://www.domenlightenment.com/ Principles of OO programming: http://www.nczonline.net/blog/2012/12/18/now-available-principles-of-object-oriented-programming-in-javascript-beta/ Object Oriented programming with Stefan Stoy... Chrome V8 : http://code.google.com/p/v8/ https://developers.google.com/v8/ https://developers.google.com/v8/design - read this Mozilla Javascript page ...
Read more

typescript notes (typeof, keyof, ReturnType, Parameters, Extract)

  typeof extract a type from runtime code, typeof "make a type of it" (i.e. from it) e.g.   typeof "Hello world"  => string only legal on variable names can be used with functions or any other expressions aside: typeof vs keyof: keyof takes a type and creates a string/number union of it's keys. So keyof creates a new type from a type ....whereas typeof creates a type from an expression. good post Given a function: const myFunc = (name: string) => {   return `hello ${name}`;    }; type the function into MyFunc type MyFunc =   typeof myFunc; type a function return type (using built in ReturnType ) type MyFuncReturn = ReturnType<typeof myFunc>;  // string When the function changes, the types change! You can also type the parameters using utility type  Parameters      type MyFuncParams = Parameters<typeof myFunc>;  // string but Parameters will return a tuple (array), so you could index result like...
Read more

react-select stacking order bug, z-index, layers and stacking

Image
Had to fix a tricky bug related to react-select recently (our Dropdown component wraps react-select). Here's the how the bug manifested. Dropdown does not overlay dynamically added content below it Variations of this have been reported since 2017. But I tried all the suggestions in the comments and none worked for me. I also tried wrapping the Dropdown in a div and changing z-index to be higher as well as making absolute position but no success. Changing the elements order in the html source and then reordering using flexbox order does work but it breaks the tabbing flow and is not recommended from an accessibility standpoint. One issue is the Dropdown is in a container and is constrained by the containers z-index. No matter how I change the Dropdowns z-index, its container is stacked below the next in stacking order. Google Chrome debugger layers tool provides a cool way to visualize layers. Could be better but helps, check it out below. You have to look closely but you can see h...
Read more