[V2] How to get the group label in onChange

[s-dezign]

v2 is really great. One question ... How to get group label/object for selected option? for example in onChange method.

Thanks #59

[JedWatson]

The entire data structure for the selected option is passed to the onChange method, so the easiest way is to put it there yourself before passing the options array to Select.

i.e

const options = [
  { label: 'Group A', options: [
    { value: 'first', label: 'First', group: 'Group A' }
  ] },
  { label: 'Group B', options: [
    { value: 'second', label: 'Second', group: 'Group B' }
  ] }
];

<Select options={options} ... />

You could easily generate this at run-time... It adds a small amount of pre-processing to your options but I'm trying to keep the core feature set of v2 limited to things you can't easily do with the extension API.

[s-dezign]

@JedWatson thank you very much!

[sag1v]

@JedWatson Is it possible to select an entire group?
Like allowing a users to select all options of Group A with a single select instead of forcing them selecting all options of this group one by one

[keithbooher]

Any options for styling group labels?

    const markup = '<h1><p>Cursive</p></h1>';
    const parser = new DOMParser()
    const el = parser.parseFromString(markup, "text/xml");
    console.log(el)

    let cursiveObject = { label: el, options: [] }

Id like the group labels to be bigger
Inserting as an element, shown above, throws an error.