npm:react-horizontal-slider

README

This is a horizontal slider-menu component for ReactJS where each item in the menu is a Card with image and a caption.

Installation

Using NPM:

$ npm install react-horizontal-slider --save

Using yarn

$ yarn add react-horizontal-slider

Demo

You can find the Demo here.

Usage

 import HorizontalSlider from 'react-horizontal-slider'
 export default class App extends React.Component {
  //other logic
    render() {
     return(
      <HorizontalSlider
         title="Menu 1"
         data={items1}
         height={300}
         width={300}
         id={1} 
         />
     //You can add Multiple Sliders if you want    
    <HorizontalSlider
         title="Menu 2"
         data={items2}
         height={400}
         width={350}
         id={2} 
         />
     );
    }
 }

Props

|Props |Type |Default |Required |Description | |--|--|--|--|--| | height|Number | 300 | No | The height of each induvidual Card in the menu | | width|Number|320| No|The width of each induvidual Card in the menu | |id|String|NA|Yes|When multiple sliders are used each should have a unique id| |title|String|None|No|The title of a particular Slider.| |data|Object|NA|Yes|The data to be displayed in the slider in the form of a Javascript object array.|

Format of Data

| Key |Required|Description | |--|--|--| | url |Yes |The url of the image to be displayed. | | title | Yes |The title of the image. | | cost |No |A cost of a particular item(for e-commerce type apps).| | company |No |Company a particular item is related to. | | desc | No |Description of the image. |

Usage no npm install needed!