npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@opuscapita/react-async-select

v3.0.0

Published

Dropdown component with advanced search modal

Downloads

52

Readme

react-async-select

Description

This component is a combination of a combobox with asynchronous fetching of results and a modal search dialog for more filtering possibilities.

Installation

npm install @opuscapita/react-async-select

Demo

View the DEMO

Builds

UMD

The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.

API

| Prop name | Type | Default | Description | | ---------------------------------- | -------- | -------------------------------------------------- | -------------------------------------------------- | | value | any | | The initially selected value | | onSelect | function | () => {} | Selection callback function | | loadOptions | function | () => Promise.resolve([]) | Function for fetching options for the combobox | | isDisabled | boolean | false | Disables the component from user interaction | | localizationTexts | object | | A dictionary with translated texts as values | | localizationTexts.["searchBy"] | string | | UI text prefix for the first search field | | localizationTexts.["by"] | string | | UI text prefix for other search fields | | localizationTexts.["close"] | string | | UI text for the Close-button | | localizationTexts.["select"] | string | | UI text for the Select-button | | localizationTexts.["field.XYZ"] | string | | Label for the search field with name "XYZ" | | localizationTexts.["column.XYZ"] | string | | Header for the column with name "XYZ" | | localizationTexts.["loading"] | string | 'Loading...' | Loading placeholder text | | localizationTexts.["noItems"] | string | '--' | Empty result set text for the dropdown | | localizationTexts.["noData"] | string | 'No rows found' | Empty result set text for the modal | | localizationTexts.["previous"] | string | 'Previous' | Paging text | | localizationTexts.["next"] | string | 'Next' | Paging text | | localizationTexts.["page"] | string | 'Page' | Paging text | | localizationTexts.["of"] | string | 'of' | Paging text | | localizationTexts.["rows"] | string | 'rows' | Paging text | | localizationTexts.["pageJump"] | string | 'jump to page' | Paging text | | localizationTexts.["rowsSelector"] | string | 'rows per page' | Paging text | | modal | object | | Modal dialog specific props | | modal.title | string | '' | Localized title of the modal | | modal.fields | [string] | [] | List of fields to show as columns | | modal.loadOptions | function | () => Promise.resolve({ data: [], totalCount: 0 }) | Function for fetching entries to the table | | modal.components | object | {} | A collection of custom components | | modal.components.LeftPanel | element | null | Custom component for left side panel | | modal.components.RightPanel | element | null | Custom component for right side panel | | setRef | function | () => {} | Allows access to select component ref from outside | | onKeyDown | function | () => {} | Allows handling of keydown events from outside |

Code example

import React, { useState } from 'react';
import { Dropdown } from '@opuscapita/react-component-example';

export default class ReactView extends React.Component {
  const [value, setValue] = useState(null);

  render() {
    return (
      <Dropdown
        localizationTexts={{
          searchBy: 'Search by',
          by: 'By',
          close: 'Close',
          select: 'Select',
          "field.fieldName1": 'my field',
          "field.fieldName2": 'another field'
          "column.fieldName1": 'My field',
          "column.fieldName2": 'Another field',
          "previous": "PREV",
          "next": "NEXT",
          "loading": "LOADING",
          "noData": "NODATA",
          "page": "PAGE",
          "of": "OF",
          "rows": "ROWS",
          "pageJump": "JUMP",
          "rowsSelector": "RPP",
        }}
        isDisabled={false}
        value={value}
        loadOptions={
          () => Promise.resolve([
            { label: 'a_DisplayValue', value: 'a' }
            { label: 'b_DisplayValue', value: 'b' }
          ])
        }
        onSelect={value => setValue(value)}
        modal={{
          title: 'Search entries',
          fields: [
            'fieldName1',
            'fieldName2',
          ],
          loadOptions: () => Promise.resolve({
            data: [
              {
                fieldName1: 'a_DisplayValue',
                fieldName2: 'a_AnotherDisplayValue'
                value: 'a'
              },
              {
                fieldName1: 'b_DisplayValue',
                fieldName2: 'b_AnotherDisplayValue'
                value: 'b'
              },
            ],
            totalCount: 0
          }),
          components: {
            LeftPanel: ({ selectedRow }) => (<div></div>),
            RightPanel: ({ selectedRow }) => (<div></div>),
          }
        }}
      />
    );
  }
}