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.

Figure 1

Another example.

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

Figure 2

1 Answer 1


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


Essential ListView based sample

Essential ListView based sample

  • 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.