React 360 Image

Just react component that equirectangular images convert to 360° images using with A-Frame.

Installation

Install with npm or yarn.

npm i react-360-img
yarn add react-360-img

Usage

import React from 'react'
import React360Img from 'react-360-img'

const App = () => {
  return (
    <>
        <React360Img 
            imgPath="/image/path.jpg" />
    </>
  )
}

Demo

See a live demo on CodePen

Props

Name	Type	Default Value
imgPath	String	[required]
width	String or Number	100vw
height	String or Number	100vh
rotation	String	0 -130 0

License

MIT

Extra Notes

About Equirectangular Image

To be seamless, images should be equirectangular. You can find some sample equirectangular images on Flickr. To take an equirectangular photo, check out this ngokevin's 360-degree photographyguide

About Original Project

Checkout the magnificent A-Frame project