PHP code example of nk-o / carbon-field-react-select

1. Go to this page and download the library: Download nk-o/carbon-field-react-select library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php.
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

nk-o / carbon-field-react-select example snippets


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

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,
    ) ),

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',
    ) ),