One small step for open source, one giant leap for Kenshoo

Introducing React-MultiSelect

Open source is awesome. It turns coding into a truly collaborative effort, where programmers improve upon the source code and share their changes with the open source community.

Recently, the Kenshoo UI guild I belong to decided to open-source our proprietary React code, which we use extensively.

Why?

Although open source software costs nothing, contributing to it requires time and effort. So why do it?

1. Keep it going. Open source is software’s “Take a penny, leave a penny” jar. As consumers of open source software, we think it’s important to give back to the community. This is how we keep it going and everybody wins.
2. High-value work. While some developers spend their time reinventing the wheel by coding pre-existing solutions, there’s a good amount of polished open source solutions out there. Developers who use pre-existing solutions can spend their time working on their products, and save both time and maintenance costs.
3. Marketplace of ideas. Through dialog and collaboration, each participant can contribute their own knowledge and experience, which results in better solutions.
4. It’s fun. Open source is a great way to learn how to code, and an opportunity to be involved in big projects. It affords endless opportunities for intellectual escape.

Kenshoo React-Shared

Kenshoo has a shared React library, which is frequently used by our react UI developers. It consists of dozens of cool components used across Kenshoo applications. At Kenshoo, we require that these solutions be generic, highly tested, and flexible enough to support the different applications. These requirements make our solutions the perfect candidates for open source. Out of the long list of eligible solutions, we decided to start out with MultiSelect, also known as CheckBoxList. MultiSelect is a very common UI component that can make the biggest impact, which makes it the perfect candidate.

MultiSelect List

MultiSelect enables users to select several items from a long list, and to narrow down the list by searching. MultiSelect uses virtualized lists to support thousands of entries. The virtualized component uses a scrolling window to render a long list of items efficiently. Users can select or clear all items, and see the selected items in the pane on the right. At Kenshoo, we use this component in several products.

To use MultiSelect, simply install it using npm or Yarn:

npm install @kenshooui/react-multi-select — save

or

yarn add @kenshooui/react-multi-select

Here’s a simple example of how to use MultiSelect in your React application:

You can also use other properties, available here. You can replace most of the sub-components (such as search, selected item, loader, and more) with your own renderers. The feature list will expand based on the requirements.

Future Features

At Kenshoo, we have already prioritized several features for development in the near future, such as additional customizations to the view, disabled items, validations, ellipsis, and tooltip support and much more. We hope to receive contributions from the community, and to develop some of those contributions on our own based on the requirements we get.

The path to open source

When we decided to open-source MultiSelect, we had to make several major changes:

1. Build system: We needed an open source build system to provide a branch and pull request build flow. We decided to use Travis CI.
2. Use external components: Since this component used a lot of react-shared proprietary code, we needed to detach it and work with an external UI component library. We went with Material UI.
3. Customization — We further customized the component with styling, toggling of certain visuals, icons, and more.
4. Refactoring — Because we started out with a mature component with bugs and issues, we refactored it in order to achieve a leaner component with clear functionality and minimal issues.
5. Documentation — We documented in detail the currently supported features, installation guidelines, and available customizations.

MultiSelect is the first component we’ve released. We’ll be open-sourcing other cool components very soon, so stay tuned!

Contribute

We invite you to take a look and contribute to the Kenshoo project. Check it out here: https://github.com/kenshoo/react-multi-select

We’d like to thank Lior Heber and Talya Knaffo for making this project a reality!