If you follow our blog posts regularly, you'll know we've been working on a library called qdt-components which includes a bunch of custom components we're using in our Qlik-powered apps. We've been using Bootstrap 4 with reactstrap, which is a collection of React components that use Bootstrap 4. The thing is that made Bootstrap 4 a dependency, and many of its styles are global, and that was a problem. We also wanted to be able to use Qlik's own Leonardo UI as a general style guide, but we needed the functionality of things like Bootstraps dropdowns. So we've been working on a new library called qdt-lui, which is a collection of React components that use Leonardo UI, Just today we finally finished replacing all of the reactstrap components in qdt-components with qdt-lui components! There's still a bit of styling to touch up on because of this transition, but for the most part it's looking and working great.
So the general idea is very similar to reactstrap, but instead of creating React components that use Bootstrap for styles, we use Leonardo UI. So far, we have 6 components, and they are - LuiButton, LuiDropdown, LuiIcon, LuiList, LuiListItem, and LuiSearch. If you're familiar with Leonardo UI, you may be aware that Leonardo UI doesn't have a dropdown component at all, it's actually a select component that just reskins an actual html select element. But for our use cases, select elements are generally not very useful, so we borrowed the styles from the Leonardo UI select component and built something very similar to a bootstrap dropdown.
The LuiSearch component uses the Leonardo UI search component styles, but makes it a controlled react component which accepts as props a value and a clear method, so you can control the value from the parent component, and we can call the passed down clear method to clear the value in the parent component when you click on the clear symbol that's in the component. Again, this pattern is very similar to reactstrap, and what we've been using as a reference when building these components.
So check it out here - https://github.com/qlik-demo-team/qdt-lui and hopefully you find it useful. You'll be seeing it used a lot from us now in most of our projects on the demo team, and we'll have a lot of examples soon. Documentation is non-existent at the moment, but checking the source of each component and taking a look at the prop-types it should be pretty clear for now, but documentation will be coming. It's still marked as alpha, but we'll be moving it to beta soon. Let us know what you guys think, if you find this useful, and any features that you would like to see. Oh, and any pull requests submitted would have us spinning in our chairs excited, so if you're so inclined to contribute, that would be very, very cool.
.png "Former Employee"){kind=icon}