Suggestion for easy-to-use encapsulation of Creatable

[FrancisVila]

Hi,

This might be better to enter as a Pull Request but I'm not too familiar with the process...
I find the Creatable.js component is great. However I struggled to get it to work, particularly selecting the newly-created option. Also I was confused in the documentation by the use of react-hook-form; it was difficult to separate in the code what came from react-hook-form and what came from react-select.
To that effect, I created an encapsulation component. Advantages:

• It handles the workload of creating the new options and selecting the newly created option.
• It makes selecting a given option easier.
• It provides defaults for all parameters (if data is absent, it uses a default "hello world" type array ['AAA', 'BBB','CCC'] ).
• It relieves developers from dealing with an array of [{value, label}] objects; (confusing to me) instead, they just provide an array of strings.

More examples in the code below

import React, { useState, useEffect,  } from 'react';
import Creatable from "react-select/creatable";
import "./myCreatable.css";
// no need for react-hook-form!
// import { FormProvider, useForm, useFieldArray, Controller } from "react-hook-form";

function MyCreatable(props) {
  
  //#region doc

  //EXAMPLES OF USE
  // 1 Examples using dummy data for "hello world" performance ['AAA', 'BBB', 'CCC']
  //    <MyCreatable />  
  //    <MyCreatable initialValue={'CCC'}  /> // sets the initial label
  //    <MyCreatable initialIndex={2}  /> // sets the initial index
  //
  // 2 Example to actually manage data outside of component:
  //    const [colors, colors_set] = useState(['red', 'yellow', 'green']) 
  //    const createColor = (newColor) => { colors_set([...colors, newColor])}
  //    <MyCreatable onCreateOption={createColor} placeholder={"Select color, or type to add new..."} data={colors}  /> 
  
   
  // PROPERTIES 
  //    (note that ALL properties are optional)
  // props.name : the name of the Creatable, probably only required internally
  // props.options : the initial array of options , in the format [{value:1, label:'AAA'},{value:2, label:'BBB'}]
  //    (users will probably prefer props.dataArray below)
  // props.dataArray : array of labels for options, in the format ['AAA', 'BBB', 'CCC']
  // props.initialValue : the initially selected value, such as 'AAA'
  // props.initialIndex : the initially selected index, such as 2
  // props.onCreateOption : what happens outside the component when the user creates a new option
  //    (adding an item to the list is handled internally )
  //#endregion propsdoc
 
  //#region useState
  const [selOption_, selOption_set] = useState()  // sets the selected option, in the form {value:2, label:"toto"}
  const [dataArray_, dataArray_set] = useState( ["AAA", "BBB", "CCC"]); // provide dummy data for <MyCreatable /> ("hello world" behavior)
  const [options_ObjArray_, options_ObjArray_set] = useState(); // array of options,in the form in the format [{value:1, label:'AAA'},{value:2, label:'BBB'}]
  const [name_, name_set] = useState("toto"); 
  const [hasNewVal_, hasNewVal_set] = useState(false); // determines whether to select the newly created option at the bottom of the list
  //#endregion useState
  
  //#region useEffect
  
  useEffect(() => { 
    if (props.name) name_set(props.name)
    else name_set("toto")
    selectIndex(0)
    computeOptionsFromLabels(dataArray_)
    if (props.initialIndex) {
      selectIndex( props.initialIndex +1)
    }
    else
    if (props.initialValue)
    selOption_set( {label:props.initialValue, value:props.initialValue})
    else
    selectIndex( 0)
  }, [props]);
  
  useEffect(() => { 
    if (props.options)
    computeOptionsFromLabels(props.options)
  }, [props.options]);
  
  
  useEffect(() => { 
    if (props.data)
    computeOptionsFromLabels(props.data)
    if (hasNewVal_) 
    {
      hasNewVal_set(false)
      selectIndex( props.data.length)
    }
  }, [props.data]);
  
  useEffect(() => { 
    if (hasNewVal_)  
    {
      selectIndex( dataArray_.length)
      hasNewVal_set(false)
    }
  }, [hasNewVal_]);
  
  //#endregion useEffect
  
  //#region functions
  const getOptionFromLabel=(label)=> {
    const _idx = dataArray_.indexOf(label)
    if (_idx !== -1) return ({label: label, value: _idx})
    else return false
  }
  
  const selectIndex = (idx) => {
    if (dataArray_[idx-1])
    { 
      selOption_set( {label:dataArray_[idx-1], value: idx-1})}
    }
    const computeOptionsFromLabels=(arr)=> {
      dataArray_set(arr)
      const _ret = arr.map(mapFunction)
      options_ObjArray_set(_ret)
      return; 
    }
    const className = props.className || 'bigCreatable'
    const mapFunction = props.mapFunction || ((label, idx) => {return ({value: idx, label: label})})
    
    //#endregion functions
    
  //#region handlers
    const onCreateOption =  (createdValue) => {
      dataArray_set ([...dataArray_, createdValue])
      const _newValue = { value: dataArray_.length , label: createdValue };
      options_ObjArray_set ([...options_ObjArray_, _newValue])
      if (props.onCreateOption)
        props.onCreateOption(createdValue)
      // selOption_set(_newValue )
      hasNewVal_set(true)
    };
    
    const onChange=(selOption, ind)=>{
      selOption_set(selOption);
     if (props.onChange) props.onChange(selOption, ind)
    }
    
    //#endregion handlers
    
  //#region return jsx
    return(
      <Creatable
      id={props.id}
      name={name_}
      className={className}
      onCreateOption={onCreateOption}
      options={options_ObjArray_}
      onChange={onChange}
      value={selOption_ }
      placeholder={(props.placeholder)? props.placeholder : "Select..."  }
      />)
      //#endregion return jsx
    }
    
    export default MyCreatable;

[ebonow]

*updated above comment to put code suggestion in code block for better readability

[FrancisVila]

thanks, that's looks much better!