react-instantsearch-dom#Highlight JavaScript Examples

The following examples show how to use react-instantsearch-dom#Highlight. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: AutoComplete.jsx    From emprezzo with MIT License 6 votes vote down vote up 
renderSuggestion(hit) {
        const [category] = hit.instant_search.facets.exact_matches.categories;

        return (
            <span>
                <Highlight attribute="query" hit={hit} tagName="mark" />
                {category && (
                    <i>
                        {' '}
            in{' '}
                        {category.value === 'ALL_CATEGORIES'
                            ? 'All categories'
                            : category.value}
                    </i>
                )}
            </span>
        );
    }
Example #2
Source File: hitcomps.js    From emprezzo with MIT License 6 votes vote down vote up 
PageHit = clickHandler => ({ hit }) => (
  <div>
    <Link to={hit.slug} onClick={clickHandler}>
      <h4>
        <Highlight attribute="title" hit={hit} tagName="mark" />
      </h4>
    </Link>
    <Snippet attribute="excerpt" hit={hit} tagName="mark" />
  </div>
)
Example #3
Source File: hitcomps.js    From emprezzo with MIT License 6 votes vote down vote up 
PostHit = clickHandler => ({ hit }) => (
  <div>
    <Link to={`/blog` + hit.slug} onClick={clickHandler}>
      <h4>
        <Highlight attribute="title" hit={hit} tagName="mark" />
      </h4>
    </Link>
    <div>
      <Calendar size="1em" />
      &nbsp;
      <Highlight attribute="date" hit={hit} tagName="mark" />
      &emsp;
      <Tags size="1em" />
      &nbsp;
      {hit.tags.map((tag, index) => (
        <Fragment key={tag}>
          {index > 0 && `, `}
          {tag}
        </Fragment>
      ))}
    </div>
    <Snippet attribute="excerpt" hit={hit} tagName="mark" />
  </div>
)
Example #4
Source File: hitComps.js    From website with MIT License 6 votes vote down vote up 
ToolsHit = clickHandler => ({ hit }) => (
  <div tw="px-4 py-4 border-b">
    <Link to={hit.fields.slug} onClick={clickHandler}>
      <h4 tw="pb-1">
        <Highlight attribute="name" hit={hit} tagName="mark" />
      </h4>
      <p tw="text-gray-600">{hit.description}</p>
      {/* Why does this not show anything? */}
      {/* <Snippet attribute="description" hit={hit} tagName="mark" /> */}
    </Link>
  </div>
)
Example #5
Source File: search-hit.js    From website with MIT License 6 votes vote down vote up 
SearchHit = ({ hit }) => {
  return (
    <div>
      <b>
        <Highlight hit={hit} attribute="name" tagName="mark" />
      </b>
      {hit.description && (
        <p>
          <Highlight hit={hit} attribute="description" tagName="mark" />
        </p>
      )}
    </div>
  )
}
Example #6
Source File: hitComps.js    From cardano-documentation with MIT License 6 votes vote down vote up 
PageHit =
  (clickHandler) =>
  ({ hit }) => {
    hit.slug = stripNumbers(hit.slug)

    return (
      <div>
        <Link to={hit.slug} onClick={clickHandler}>
          <div>
            <Highlight attribute="title" hit={hit} tagName="mark" />
          </div>
        </Link>
        <Snippet attribute="excerpt" hit={hit} tagName="mark" />
      </div>
    )
  }
Example #7
Source File: hitComps.js    From learningHub with MIT License 6 votes vote down vote up 
PageHit = clickHandler => ({ hit }) => (
  <div>
    <Link to={hit.slug} onClick={clickHandler}>
      <div>
        <Highlight attribute="title" hit={hit} tagName="mark" />
      </div>
    </Link>
    <Snippet attribute="excerpt" hit={hit} tagName="mark" />
  </div>
)
Example #8
Source File: Hit.js    From showcase-nextjs-typesense-ecommerce-store with Apache License 2.0 6 votes vote down vote up 
Hit = ({hit}) => <div>
  <div className="row image-container">
    <div className="col-md d-flex align-items-end justify-content-center">
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img src={hit.image} alt={hit.name} />
    </div>
  </div>
  <div className="row mt-5">
    <div className="col-md">
      <h5>
        <Highlight hit={hit} attribute="name" tagName="mark" />
      </h5>
    </div>
  </div>

  <div className="row mt-2">
    <div className="col-md">
      <Highlight hit={hit} attribute="description" tagName="mark" />
    </div>
  </div>

  <div className="row mt-auto">
    <div className="col-md">
      <div className="hit-price fw-bold mt-4">{hit.price}</div>
      <div className="hit-rating">Rating: {hit.rating}/5</div>
    </div>
  </div>
</div>
Example #9
Source File: suggestion.js    From Nextjs-ja-translation-docs with MIT License 5 votes vote down vote up 
export default function Suggestion({ hit }) {
  return (
    <Link {...getHitLinkProps(hit)}>
      <a>
        <span className="suggestion__title">
          <Highlight hit={hit} attribute="title" tagName="mark" />
        </span>
        {hit.section && (
          <span className="suggestion__section">
            <Highlight hit={hit} attribute="section" tagName="mark" />
            {hit.subSection && (
              <>
                {' '}
                - <Highlight hit={hit} attribute="subSection" tagName="mark" />
              </>
            )}
          </span>
        )}
        <span className="suggestion__content">
          <Snippet hit={hit} attribute="content" tagName="mark" />
        </span>

        <style jsx>{`
          .suggestion__title {
            font-weight: 500;
            margin-bottom: 0.5rem;
            display: flex;
          }
          .suggestion__section {
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
            display: block;
          }
          .suggestion__content {
            color: #333333;
            display: block;
            line-height: 1.6;
          }
        `}</style>
      </a>
    </Link>
  );
}
Example #10
Source File: hits.js    From emprezzo with MIT License 5 votes vote down vote up 
shopHit = hit => (
  <div>
    <Tag size="1em" />
    &nbsp;
    <Highlight attribute="tags" hit={hit} tagName="mark" />
  </div>
)
Example #11
Source File: Hits.js    From climatescape.org with MIT License 5 votes vote down vote up 
Hits = ({
  hits,
  activeHit,
  openActiveHit,
  onChangeActiveHit = () => {},
}) => {
  const activeIndex = boundedIndex(activeHit, hits.length)

  // The parent component can choose to open one of the hits here by setting
  // `openActiveHit` to true
  useEffect(() => {
    if (openActiveHit && hits.length)
      navigate(`/organizations/${hits[activeIndex].path}`)
  }, [openActiveHit, hits, activeIndex])

  return (
    <ul className="absolute bg-white w-screen sm:w-full left-0 border border-gray-300 sm:rounded-lg mt-1 text-md">
      {hits.map((hit, index) => (
        <li key={hit.objectID} className="border-b border-gray-200">
          <Link
            to={`/organizations/${hit.path}`}
            className={classnames("block w-full p-2", {
              "bg-gray-200": index === activeIndex,
            })}
            onMouseEnter={() => onChangeActiveHit(index)}
          >
            <Highlight attribute="name" hit={hit} />
          </Link>
        </li>
      ))}

      {!hits.length && (
        <li className="border-b border-gray-200 p-2 text-gray-600 italic">
          No results...
        </li>
      )}

      <li className="text-gray-500 text-right py-1 px-2 text-xs">
        <PoweredBy />
      </li>
    </ul>
  )
}