nk-o/carbon-field-react-select

Carbon Fields extension, that adds a React_Select field type.

v3.1.0 2022-02-15 22:37 UTC

GPL-2.0+

• wordpress
• carbon-field
• carbon-field-react-select
• react-select

README

Added functionality of react-select in Carbon Fields plugin.

Install

Using Composer:

composer require nk-o/carbon-field-react-select

Usage

Default:

Field::make( 'react_select', 'alignment', 'Alignment' )
    ->add_options( array(
        'left'    => 'Left',
        'center'  => 'Center',
        'right'   => 'Right',
    ) ),

Icons:

Field::make( 'react_select', 'alignment', 'Alignment' )
    ->add_options( array(
        array(
          'icon' => '<svg xmlns="http://www.w3.org/2000/svg">...</svg>',
          'label' => esc_html__( 'Icon 1', '@@text_domain' ),
          'value' => 'icon_1',
        ),
        array(
          'icon' => '<svg xmlns="http://www.w3.org/2000/svg">...</svg>',
          'label' => esc_html__( 'Icon 2', '@@text_domain' ),
          'value' => 'icon_2',
        ),
    ) )
    ->set_props( array(
        'icons' => true,
    ) ),

Available Props:

Field::make( 'react_select', 'alignment', 'Alignment' )
    ->add_options( array(
        'left'    => 'Left',
        'center'  => 'Center',
        'right'   => 'Right',
    ) )
    ->set_props( array(
        'clearable'            => true,
        'disabled'             => false,
        'autoFocus'            => false,
        'closeOnSelect'        => true,
        'ignoreAccents'        => true,
        'ignoreCase'           => true,
        'labelKey'             => 'label',
        'multi'                => false,
        'onBlurResetsInput'    => true,
        'onCloseResetsInput'   => true,
        'onSelectResetsInput'  => true,
        'openOnClick'          => true,
        'openOnFocus'          => false,
        'removeSelected'       => true,
        'pageSize'             => 5,
        'rtl'                  => false,
        'scrollMenuIntoView'   => true,
        'searchable'           => true,
        'simpleValue'          => false,
        'tabSelectsValue'      => true,
        'trimFilter'           => false,
        'valueKey'             => 'value',
        'className'            => '',
        'icons'                => false,

        'placeholder'          => 'Select...',
        'clearAllText'         => 'Clear all',
        'clearValueText'       => 'Clear value',
        'noResultsText'        => 'No results found',
        'searchPromptText'     => 'Type to search',
    ) ),

Props descriptions read here - https://github.com/JedWatson/react-select#select-props