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

rjsf-autosuggest

v0.0.1

Published

Wrapper for using react-autosuggest with react-jsonschema-form

Downloads

92

Readme

rjsf-autosuggest

This package connects react-autosuggest to react-jsonschema-form. A live demo of everything shown here can be viewed on this projects github page.

Basic Usage

Install with yarn add rjsf-autosuggest, import, and add Autosuggest to the uiSchema for any field. This will work normally with the enum and enumNames of react-jsonschema-form to make an autocomplete widget.

import React from 'react'
import Form from 'react-jsonschema-form'
import Autosuggest from 'rjsf-autosuggest'

import pokemon from './pokemon.json'

const schema = {
  type: 'object'
  properties: {
    pokemon: {
      type: 'string',
      title: 'Choose your pokemon',
      enum: pokemon.map(({ name }) => name),
    },
  },
}

const uiSchema = {
  pokemon: {
    'ui:widget': Autosuggest,
    'ui:options': {
      // any options here will be passed to react-autosuggest
    },
  },
}

const PokemonForm = () => {
  return (
    <Form schema={schema} uiSchema={uiSchema}
  )
}

Allow Custom Calues

react-autosuggest doesn't forbid custom values by default, but rjsf's enum forces the value to be one of the designated choices. To fix this use uiSchema['ui:options'].choices instead of schema.enum.

const schema = {
  type: 'object',
  properties: {
  pokemon: {
    type: 'string',
    title: 'Choose a pokemon (or whatever)',
  },
}

const uiSchema = {
  pokemon: {
  'ui:widget': Autosuggest,
  'ui:options': {
    choices: pokemon.map(({ id }) => id),
  },
}

Advanced usage

This component acts mostly as a pass-through for react-autosuggest. Theoretically any props can be passed through via uiSchema[field_name]['ui:options'] for complete control of the autosuggest component. For example, to render more than just the label of the suggestion.

const uiSchema = {
  pokemon: {
  'ui:widget': Autosuggest,
  'ui:options': {
    // all properties other than enumOptions (from schema) will be passed into Autosugest
    renderSuggestion({ label }, { isHighlighted }) {
    const className =
      Autosuggest.config.css[isHighlighted ? 'activeItem' : 'item']
    const match = pokemon.find((p) => p.name === label)
    return (
      <div className={className}>
      <span className="mr-2">#{match.id}</span>
      <span className="mr-2">{label}</span>
      {match.type.map((type) => (
        <Type type={type} key={type} />
      ))}
      </div>
    )
    },
  },
}

Overriding more complicated behavior could be difficult because they use the internal state of the component. Feel free to open an issue if you have trouble overriding other attributes. If you want to override more functionality, I recommend copying src/index.js of this project and modifying it directly (it's actually much shorter than this README).

Styling

In the custom of react-jsonschema-form I used bootstrap syntax for the form components styling. Additionally, there are some custom class names on react-autosuggest which cannot be changed. Look at bootstrap.css for the minimum number of changes necessary to make this work with stock bootstrap v4.

If you want to override the classNames, there is a Autosuggest.config.css object which can be modified. Below are the default values (so this example is a no-op).

import Autosuggest from 'rjsf-autosuggest'

Autosuggest.config.css = {
  input: 'form-control',
  container: 'list-group',
  item: 'list-group-item list-group-item-action',
  activeItem: 'list-group-item list-group-item-action active',
}

If you have trouble debugging style (because the menu closes when using the element inspector), I recommend adding the following attributes to force the menu to stay open.

const uiSchema = { pokemon: { 'ui:options': { alwaysRenderSuggestions: true, onSuggestionsClearRequested: () => {}, } } }