Looking for working example of search component built with Meteor and React

Hey guys, I’m looking for a working example of search component built with Meteor and React. Nothing special, I would just implement this feature for searching through documents’ names, right now I have two components - searchbar and a list view where I list my documents, so it’d be nice to just type documen’ts name in searchbar and have it displayed in this list view, but I have no idea how to implement it. Any package suggestion would be great too. Thank you for your time.

Guys, sorry for being a dumbo, I googled around and made use of easy:search and meteor-blaze-react-component packages. If you would like to see my example I’d post it up though :slight_smile:

I’ve use this and implement in React… No need to install the package itself but you can if you wish


Hi Vadik,

I would love to see your example of how you have used easy:search and meteor-blaze-react, especially the createContainer and how you consumed that?

Hey man, sorry for late response, haven’t been to a forum for a while.
As I learned from package’s docs the only way to use it is with Blaze Templates so first I created a template for search functionality like this:

<template name="search">
    <div class="container">
        <div class="input">
              {{> EasySearch.Input attributes=inputAttributes index=itemsIndex}}
                  {{#EasySearch.Each index=itemsIndex}}
                    <div class="container">

To make use of this template I defined a helper:

import { Template } from 'meteor/templating';
import { Items } from '../../api/collections/items.js';

    itemsIndex: () => ItemsIndex

  inputAttributes: () => {
    return {
      placeholder: 'Sample text'

So after that I used it in my component, let’s say ItemsList.jsx like so:

import React, { Component } from 'react';
import Blaze from 'meteor/gadicc:blaze-react-component';
import '../templates/search.html';
import '../templates/helpers.js';

export default class ItemsList extends Component {
    render() {
        return (
            <div className="container">
                <h3>Sample text</h3>
                <Blaze template="search" />

Searchbar I needed was really that simple but I don’t think it would be hard to implement something more complex. Btw in case the search functionality depends fully on built-in Meteor features as Blaze, it’s no need to use something React-related to get data. In real project Search template also contains an event to interract with data.

How about this: https://blog.designveloper.com/2016/06/21/react-structure-container-component-in-meteor/
It totally rocks!!

But what if you need the results to be clickable and linked to another page? You’re out of luck if using react-router’s <Link>