Seeking list-detail Reactjs component library

Question

I'm building a Reactjs app. I would like to find a React component library or open source project that implements the familiar MasterList-Detail UX pattern so familiar with modern mobile apps. Similar to the demo contained in the below GIF.

I need a UX component that let's me implement a list, then after clicking on the list, show the detail of that list item.

Something like:

<ListDetail list={foo} />

Figure 1. List-Detail Demo. Shows the familiar list view, then detail reveal after clicking a list item.

Another example.

Figure 2. Same basic pattern as Fig. 1. I am seeking a React component library or open source project.

Answer 1

Essential ListView EJ 2 for React supports creating these kind of lists.

Example

• The list-item and inner level navigation items are customized using ListView template property.
• Search has been achieved using Syncfusion DataManager query
• Included comments for each methods of StackBlitz sample

The whole product is available for free through the community license if you qualify (less than 1 million USD in revenue).

Note: I work for Syncfusion.