Picky 6

[Aidurber]

I know it's not a widely used component, but I thought I'd still share my roadmap for Picky.

One thing that gets asked a lot is "can Picky do X", I'm usually surprised to find that with a combination of render props and some other hacks, that yes, Picky can do it.

However, as more feature requests come in and for those cases where a render prop won't cut it, I find myself adding prop after prop. There are currently 34 props that can get passed to Picky. The API isn't fun or flexible to work with, so I'm proposing a new structure to Picky.

<Picky
  id="picky"
  options={bigList}
  value={this.state.arrayValue}
  isMultiple
  onChange={this.selectMultipleOption}
>
  <PickyButton>
    <PickyPlaceholder noneSelectedText="None selected" />
  </PickyButton>
  <PickyDropdown>
    <PickyFilter placeholder="Filter something..." />
    <PickySelectAll />
    <PickyOptions />
  </PickyDropdown>
</Picky>

If you want a filter, just add the component. If you want to build your own component, use the PickyContext.

// Very contrived example
function SomeOtherFilter({ className, ...rest }: Props) {
  const { onFilterOptions } = usePicky(); // Exported along with the library. 
 function onChange(e: React.ChangeEvent<HTMLInputElement>) {
    // Send it to analytics
   Analytics.send('user:filter', e.target.value);
    onFilterOptions(e.target.value.trim());
  }
  return (
    <input
      className="picky__filter"
      type="text"
      onChange={onChange}
      {...rest}
    />
  );
}

The filter can be outside of the dropdown and live inside the button instead of a placeholder. Select all can be a button outside the dropdown. Render what you want and use the context to get the options and selected values.

Here's an example creating a multi column dropdown list, yes you could do this with plain CSS, I'm just showing an example where you can use the context:

function MultiColumnOptions() {
  const { options } = usePicky();

  return (
    <div className="dualcolumn">
      {options.map(opt => {
        return <PickyOption option={opt} />;
      })}
    </div>
  );
}

<Picky
  id="picky"
  options={bigList}
  value={this.state.arrayValue}
  isMultiple
  onChange={this.selectMultipleOption}
>
  <PickyButton>
    <PickyPlaceholder noneSelectedText="None selected" />
  </PickyButton>
  <PickyDropdown>
    <PickyFilter placeholder="Filter something..." />
    <PickySelectAll />
    {/* <PickyOptions /> */}
    <MultiColumnOptions />
  </PickyDropdown>
</Picky>

Since I was able to re-think Picky from the ground up, the code is simpler and much shorter.
Current Picky is around 1656 lines of code. Whereas the new version is around 330 lines of code. This drops the bundle size too:
Sizes (Minified)
Old: 12.6 KB (4.1KB gz)
New: 3.65KB (1.44KB gz)

I'm still playing around with the concept, but it's looking extremely promising.

[donkeyDau]

I love it! Do you have any (rough) estimate when you'll release v6?

[Aidurber]

Hi @donkeyDau sorry, no estimate at the moment I'm afraid. Work and personal life have been taking my attention this year and it has been hard to commit to this.

I might be able to get to it over the holidays when I have some personal time.