React library for Stork

[jameslittle230]

If you're writing a site that uses React, you should be able to npm install something and get access to Stork from the frontend.

I'm imagining an API like:

function MySearchComponent() {
    const [query, setQuery] = useState("");
    const [searchResults, setSearchResults] = useStork("https://example.com/my-index.st", "myIndex");

    const onInputChange = (event) => {
        setQuery(event.target.value);
        setSearchResults(event.target.value);
    }

    return (
        <>
            ...
            <input onChange={onInputChange} />
            <ul>
                {searchResults.results.map((result) => (<MySearchResultComponent result={result} />))}
            </ul>
        </>
    )
}

The searchResults variable would bind to an object that could hold an array of results, a number to indicate loading progress, and other bits of state. Ideally you'd be able to build the entire managed UI from the state you get from that hook.

Perhaps, for the people who want the managed UI (instead of having to style it themselves), I could expose a component:

function MyOtherSearchComponent() {
    return (
        <StorkSearch
            index="https://example.com/my-index.st"
            name="myIndex"
            onSearch={() => { /* analytics, or something */ }}
        />
    )
}

How does that look? Any initial feedback?

[healeycodes]

This would fit my use case. I have a static blog and want to use the managed UI via React (but might want to roll my own UI in the future).

I'm not sure how to handle errors (let's say, a missing *.st file) in the initial example above. I'm guessing that useStork would throw and users could wrap MySearchComponent with an error boundary.

Overall design looks sensible 👍

[GeeWizWow]

As a primary React developer, I would welcome the above API, but...

I can't help but feel that given the current status of the project, a better first step might be to expose a framework agnostic Javascript API, as well as perhaps provide a wrapper around the CLI tool to better integrate with the build pipelines used in the Javascript ecosystem (webpack?)

That would provide solid foundations for the build out of any number of framework specific APIs/ Implementations...

Edit: Sorry if a Javascript api is already exposed, I wasn't able to find one referenced in the documentation.

[jameslittle230]

@GeeWizWow - I want to make sure you've seen the Stork Javascript API for embedding Stork search interfaces on web pages - the React library I'm describing here would effectively wrap around this VanillaJS library.

You might be hoping to see a Stork Javascript API for building search indexes? That's definitely something I'm interested in, but haven't scoped out as much. A few other folks have created Node wrappers around the indexer binary which seems to have worked well for them.

Let me know if that helps clear up any confusion.

[GeeWizWow]

@jameslittle230 Those are exactly the things I wanted to see 🙏 Thanks for the links