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

trompa-multimodal-component

v1.4.0

Published

The Multimodal Component for React applications

Downloads

3

Readme

Trompa Multimodal Component

The Multimodal Component React library for the TROMPA project

NPM JavaScript Style Guide

This project is part of the TROMPA project.

Installation

Assuming you already have a React application, the easiest way to start using the Multimodal Component, is to install it via NPM or Yarn.

If you're using NPM:

npm install --save trompa-multimodal-component

If you're using Yarn:

yarn add trompa-multimodal-component

Material-UI

The MultiModal Component uses the peer dependency MaterialUI, so make sure you have it installed as well.

NPM:

npm install @material-ui/core @material-ui/icons

Yarn:

yarn add @material-ui/core @material-ui/icons

Usage

This is a basic usage example. There will be more examples after more options have been added to the Multimodal Component.

import React, { Component } from 'react'
import MultiModalComponent, { SearchConfig, searchTypes } from 'trompa-multimodal-component'

const searchConfig = new SearchConfig({
  searchTypes: [searchTypes.MusicComposition],
});

class Example extends Component {
  render() {
    return (
      <MultiModalComponent
        config={searchConfig}
        onResultClick={node => console.log('User has clicked on:', node)}
        i18n={{
          'en-US': { searchBar: { placeholder_text: 'Search for all music compositions...' } },
          'nl-NL': { searchBar: { placeholder_text: 'Zoek voor alle muziek composities...' } },
        }}
      />
    )
  }
}

Explicit filtering example

const searchConfig = new SearchConfig({
  searchTypes: [searchTypes.DigitalDocument],
  fixedFilter: {
    workExample_some: {
      identifier_in: ['56667d40-aa92-4106-a97e-9b28656c56e3', '7e36728d-6112-4deb-9240-1ff77e219f96', '25cdbfcb-af80-4fe6-9dc5-1ae47bcea5e0', 'b31c303e-3484-4787-896c-3c1048995103'],
    },
  },
});

Props

| Prop | Type | Default value | Description | Required | |------|------|---------------|-------------|----------| | searchConfig | SearchConfig | undefined | An instance of the SearchConfig class | Yes | | onResultClick | Function | function(result: Object) { } | Callback when the user clicks on a result. | No | | renderSearchResult | Function | function(type: String, item: Object, onResultClick: function) { } | Custom render function for search results. | No | | placeholderText (deprecated, use i18n) | String | Enter a search phrase... | Placeholder text for the search input | No | | i18n | Object | undefined | Override translations | No |

Currently supported searchTypes

const searchTypes = ['AudioObject', 'DigitalDocument', 'Person', 'MusicComposition', 'VideoObject'];

Custom searchTypes

A custom search type can also be used. This can be either a Class or Object with at least the following properties: name, filters, searchAllQuery and searchQuery.

For example to create a custom search type for SoftwareApplications;

import gql from 'graphql-tag';

class CustomType {
  static name = 'SoftwareApplication';

  static filters = [];

  static searchAllQuery = gql`
    query($query: String!, $first: Int = 9999) {
      allResults: searchMetadataText(onTypes: [SoftwareApplication], onFields: [title], substring: $query, first: $first) {
        ... on SoftwareApplication {
          identifier
          format
          _searchScore
        }
      }
    }
  `;

  static searchQuery = gql`
    query($filter: _SoftwareApplicationFilter) {
      results: SoftwareApplication(filter: $filter, first: 50) {
        __typename
        ... on SoftwareApplication {
          identifier
          name
          title
          creator
          source
        }
      }
    }
  `;
}

If your setup doesn't support static class properties, you can define the properties like this as well:

class CustomType {
}

// or const CustomType = {}

CustomType.name = 'SoftwareApplication';
CustomType.filters = [];
CustomType.searchAllQuery = gql`
    query($query: String!, $first: Int = 9999) {
      allResults: searchMetadataText(onTypes: [SoftwareApplication], onFields: [title], substring: $query, first: $first) {
        ... on SoftwareApplication {
          identifier
          format
          _searchScore
        }
      }
    }
  `;

CustomType.searchQuery = gql`
    query($filter: _SoftwareApplicationFilter) {
      results: SoftwareApplication(filter: $filter, first: 50) {
        __typename
        ... on SoftwareApplication {
          identifier
          name
          title
          creator
          source
        }
      }
    }
  `;

Custom result

If you want to change the rendered result, you can use the renderSearchResult prop to use a custom function. This function should return a valid JSX object.

You can use the SearchResult component to quickly customise or add a custom search result. However, you can return any custom styled component. Make sure to pass the onClick function so that the trompa-multimodal-component can handle this event accordingly.

import React, { Component } from 'react'
import MultiModalComponent, { SearchConfig, searchTypes, SearchResult } from 'trompa-multimodal-component'

const searchConfig = new SearchConfig({
  searchTypes: [searchTypes.MusicComposition],
});

const renderSearchResult = (type, item, onClick) => {
  // You can return custom JSX
  // return (
  //   <div onClick={() => onClick(item)}>{item.title}</div>
  // );

  // If you conditionally return a search result, make sure to always fallback to a default search result like the
  // following line.
  return <SearchResult title={item.title} variant="default" onClick={() => onClick(item)} />
};

class Example extends Component {
  render() {
    return (
      <MultiModalComponent
        config={searchConfig}
        onResultClick={node => console.log('User has clicked on:', node)}
        renderSearchResult={renderSearchResult}
        i18n={{
          'en-US': { searchBar: { placeholder_text: 'Search for all music compositions...' } },
          'nl-NL': { searchBar: { placeholder_text: 'Zoek voor alle muziek composities...' } },
        }}
      />
    )
  }
}

Local development

To start the example demo, run

yarn start:example

And visit http://localhost:5050 in a browser

License

Apache-2.0 ©