react-lists-and-details

Lists are a common component to add to a react app. Often, there will be a title and image associated with each list item on a page. On clicking the list item, the user is presented with more detailed information about the item, including a description and other relevant details. The components that come with this package are described allow the user to easily enact this functionality in a react app.

Usage no npm install needed!

<script type="module">
  import reactListsAndDetails from 'https://cdn.skypack.dev/react-lists-and-details';
</script>

README

React List and ListItem Components

Lists are a common component to add to a react app. Often, there will be a title and image associated with each list item on a page. On clicking the list item, the user is presented with more detailed information about the item, including a description and other relevant details. The components that come with this package are described allow the user to easily enact this functionality in a react app.

Entering your list items and details

  • Add a large and small image for each list item to the assets folder.
  • Navigate to the data folder which contains the listData file and adjust the image import statements to match the images you uploaded to the assets folder.
  • Edit the list objects with relevant information.
  • Add additional list items to the listData array, following the pattern for the sample list items.

List component

  • The List component will display when the user navigates to the homepage of your app. It will display all items in a grid. The grid is responsive to all screen widths.

ListItem component

  • The associated ListItem component will display when a user clicks on any item in the List component. The user will be redirected to this detail page which will display the associated details for the list item selected.