Responsive Store React

Hi Everyone,

I've been programming for a couple of years and I have had to build multiple web stores for freelance clients that wanted something easy to maintain.

It got me to thinking... why not create a library that can speed up the process and help my fellow devs develop web stores faster.

Therefore I have created the npm package responsive-react-store which can be found here.

This will be a tutorial on how to use this package.

Prerequisites

To be able to use this package you will need the following tools and skills

• Basic knowledge of React
• React ^16
• Node ^14
• NPM ^6

Responsive React Store

This library is an open source project that I started a couple weeks ago. It is a library that takes care of creating a storefront for developers that is easy to use and integratabtle with a long list of tools.

Now.. let's get started with the Responsive React Store. You can install the package by running npm install responsive-react-store@latest. After installation you will have access to both the store as well as the cart component.

Below you will find the easiest setup for the store that you can use

import React,  from 'react'

import Store, { Cart } from 'responsive-store-react'

const MyStore = () =>  ( 
<div>
  <Cart>
   <Store inventory={[]} />
  </Cart>
</div>
)

The important part here is the Cart which is using the context API for state management of the cart. It also utilizes localStorage to keep track of the cart during sessions.

The Cart component should wrap the Store component so it has access to the cart from inside. The store doesn't work without wrapping it in a cart component. You can add multiple stores to a single cart so you can differentiate between categories or product groups.

The div on the outside is used because we need an element with a position:relative to keep the cart from drawing outside the lines. Seeing the cart uses position: absolute and is positioned in the top left corner we want to wrap it in a parent component to keep it from overlaying other components on your page, e.g a navbar.

The Store component has a property named inventory. This is an array of objects that the store creates items out of. The objects should hold the following properties:

• price (integer)
• title (string)
• img (string)

The Store

In the image below you can see the store as rendered with some example data

The store comes equipped with buttons on the top right side that set the direction of the store to either a single row or a grid that is responsive to every screen size.

the top left button is the cart component that you can fill by pressing the button on the bottom right on any item.

The store has the following properties that it is looking for.

• inventory
• dir
• showDirection
• height

Inventory

inventory is an array of objects filled with title, price and img. This will propagate the store with your items

Dir

dir is setting a direction for the store, there are two possible values 'column' or 'row'

showDirection

The default setting is true which gives us the buttons on the top right. if you want to hide the buttons you can give it a value of false

Height

the height property which takes in an integer which will set the height of the store in rem. The minimum is 25rem

Multiple Stores

You can also have a page with multiple stores still wrapped in the same Cart component. This way you can separate out the products by category or product group.

const MyMulipleStores = () =>  ( 
<div>
  <Cart>
   <h1> Sport Goods </h1>
   <Store inventory={[]} />
   <h1> Electronics </h1>
   <Store inventory={[]} />
   <h1> Miscellaneous </h1>
   <Store inventory={[]} />
  </Cart>
</div>
)

The Cart will keep track of all the stores that are its children. This way once you get your array of items from a database you can slice them into their own categories and provide those to the stores.

Cart

The cart uses localStorage to store items added to the cart. It also has a checkout button that doesn't do anything out but console log the cart out of the box. However you can pass a function to it which will override the console log. This can be a stripe function or any other platform you would like.

more to come on this in the following weeks..

That's not all folks

I hope this initial post is helpful in getting you started. As I mentioned this is an open source project which you can contribute to as well. below you can find resources on how to do this.

I will be posting more about this library in the following weeks with tutorials on integration with FireBase

github
discord
trello