-
Notifications
You must be signed in to change notification settings - Fork 23
FAQ
Don't see your problem listed here? You can create a discussion or issue.
The base iTwinUI-css package is meant to offer standalone component styling, as well as Sass variables for spacing, color, etc.
The iTwinUI-react package depends on and uses styles from the base iTwinUI-css package to offer React components.
If you only need to use the components in isolation, you only need to install iTwinUI-react. But if you're building a complete app, you might also need to make use of the Sass variables exported in iTwinUI-css.
Our popover components wrap an external library called tippy.js. We recommend going through their documentation if you have trouble using them.
This can happen if the child component does not forward its ref (see docs). It can also happen if the child component is disabled. One workaround is to wrap your content in a div or span.
This can happen due to the parent container using CSS overflow or position: absolute or z-index stacking contexts. (By default, Tooltip is appended to the parent container.) The workaround is to use appendTo={() => document.body}.
If you want your popover to be triggered on an element that is not a direct child, you can use the reference prop.
Our table is a styled wrapper around react-table. We recommend going through their documentation and issues before opening new issues in iTwinUI-react.
If you find that the table is missing a feature, there may already be an existing issue for it. You can upvote 👍 the relevant issue (and/or leave a comment) to help us prioritize it.
iTwinUI-react uses react-table v7, which can cause problems if your project is also using react-table v6. Using custom aliases in package.json for both react-table v6 and its types can help:
...
"react-table-v6": "npm:react-table@^6.11.5"
...
"@types/react-table-v6: "npm:@types/react-table@^6.8.8"
...