react select

Reaccionar

El control Seleccionar para React. Inicialmente construido para su uso en Keystonejs.

Ver react-select.com para demostraciones en vivo y documentos integrales.

react-select está financiado por Thinkmill y Atlassian. Somos un proyecto de código abierto que es continuamente apoyado por la comunidad.

React Select lo ayuda a desarrollar componentes seleccionados potentes que simplemente funcionan de la caja, sin evitar que personalice las piezas que son importantes para usted.

Para la historia detrás de este componente, vea la charla de Jed en React Conf 2019 - Building React Select

Las características incluyen:

• Enfoque flexible a los datos, con funciones personalizables
• API de estilo extensible con emoción
• API de inyección de componentes para un control completo sobre el comportamiento de la interfaz de usuario
• Accesorios de estado controlables y arquitectura modular
• Características solicitadas desde hace mucho tiempo como grupos de opciones, soporte de portal, animación y más

¿Usando una versión anterior?

• Guía de actualización V3, V4 y V5
• Guía de actualización de V2
• React Select V1 La documentación y los ejemplos están disponibles en v1.react-select.com

Instalación y uso

La forma más fácil de usar React-Select es instalarlo desde NPM y incorporarlo en su aplicación con Webpack.

 yarn add react-select

Luego úsalo en tu aplicación:

 import React , { useState } from 'react' ;
import Select from 'react-select' ;

const options = [
  { value : 'chocolate' , label : 'Chocolate' } ,
  { value : 'strawberry' , label : 'Strawberry' } ,
  { value : 'vanilla' , label : 'Vanilla' } ,
] ;

export default function App ( ) {
  const [ selectedOption , setSelectedOption ] = useState ( null ) ;

  return (
    < div className = "App" >
      < Select
        defaultValue = { selectedOption }
        onChange = { setSelectedOption }
        options = { options }
      / >
    < / div >
  ) ;
} 

Accesorios

Los accesorios comunes que desee especificar incluya:

• autoFocus : enfoque el control cuando se monta
• className : aplique un nombre de clase al control
• classNamePrefix : aplique los nombres de clase a los elementos internos con el prefijo dado
• isDisabled - Desactive el control
• isMulti : permita que el usuario seleccione múltiples valores
• isSearchable : permita que el usuario busque opciones de coincidencia
• name : genere una entrada HTML con este nombre, que contiene el valor actual
• onChange : suscribirse a los eventos de cambio
• options : especifique las opciones que el usuario puede seleccionar
• placeholder : cambie el texto que se muestra cuando no se selecciona ninguna opción
• noOptionsMessage - ({inputValue: String}) => String | NULL - Texto para mostrar cuando no hay opciones
• value : controlar el valor actual

Consulte la documentación de los accesorios para la documentación completa sobre los soportes de reacts-select.

Accesorios controlables

Puede controlar los siguientes accesorios proporcionándoles valores. Si no lo hace, React-Select los administrará por usted.

• value / onChange : especifique el valor actual del control
• menuIsOpen / onMenuOpen / onMenuClose - Controle si el menú está abierto
• inputValue / onInputChange : controle el valor de la entrada de búsqueda (cambiar esto actualizará las opciones disponibles)

Si no proporciona estos accesorios, puede establecer el valor inicial del estado que controlan:

• defaultValue : establezca el valor inicial del control
• defaultMenuIsOpen : configure el valor abierto inicial del menú
• defaultInputValue : establezca el valor inicial de la entrada de búsqueda

Métodos

React-select expone dos métodos públicos:

• focus() : enfoque el control programáticamente
• blur() - desenfoque el control programáticamente

Personalización

Consulte los documentos para obtener más información sobre:

• Personalización de los estilos
• Uso de componentes personalizados
• Uso de los componentes animados incorporados
• Creación de una selección async
• Permitiendo a los usuarios crear nuevas opciones
• Casos de uso avanzados
• Guía de mecanografiado

Mecanografiado

La versión V5 representa una reescritura de JavaScript a TypeScript. Los tipos para versiones V4 y anteriores están disponibles en @Types. Consulte la guía TypeScript sobre cómo usar los tipos que comienzan con V5.

Gracias

Gracias a todos los que han contribuido a este proyecto. Ha sido un viaje salvaje.

Si te gusta React Select, ¡debes seguirme en Twitter!

Grita a Joss Mackison, Charles Lee, Ben Conolly, Tom Walker, Nathan Bierema, Eric Bonow, Emma Hamilton, Dave Brotherstone, Brian Vaughn y el equipo del Sistema de Diseño Atlassiano que junto con muchos otros contribuyentes han hecho este posible ❤️

Licencia

MIT con licencia. Copyright (c) Jed Watson 2022.