1

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

bumped to the homepage by Community 23 hours ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

1

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

Example

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 acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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