Image for post
Image for post
Copyright: © storybook.js.org

I used Storybook to document my React components and host it on GitHub Pages to make it accessible for other members of the team, specially for front-end devs and designers to reuse the existing components and avoid creating duplicate ones. Ok, let’s begin.

Firstly, install gh-pages in your application by running the following command:

npm install gh-pages --save-dev
or
yarn add gh-pages -D

after successfully installing the gh-pages , open the package.json file and add the following code at the beginning of the file.

"homepage": "http://YOUR_GITHUB_USERNAME.github.io/REPO_NAME

Next, in your script section add the following code to it. Bear in mind…


Image for post
Image for post
Copyright: © Sam Rohn 2013

Due to the COVID-19 pandemic, I was asked to work on a task to let our users upload 360 images of their properties to help their clients to have virtual tours and navigation between different locations.

The first problem I was facing was to get a coordinate of the uploaded 360 images to ping an icon to navigate to a different location.

I used pannellum-react to achieve my goal. Pannellum-react is a React component library which is extended from Pannellum.

To render the 360 images:

First, you need to import the library to your page.

import { Pannellum } from…

Armin Yazdani

Passionate JavaScript Developer 💻 — React developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store