How to use owl carousel options in React Owl Carousel? - reactjs

Question

I am new to React JS. I have tried to use owl carousel in React.
The package link I installed from npm is
https://www.npmjs.com/package/react-owl-carousel
As instructed I have imported Owl Carousel component on specific page. Here is the code:
import React, { Component } from 'react';
import {Grid, Row, Col , ProgressBar } from 'react-bootstrap';
import UserAvtar from '../common/UserAvtar.js';
import SectionHeaderOfCards from '../common/SectionHeaderOfCards.js';
import OwlCarousel from 'react-owl-carousel';
const options = {
items: 4,
};
class DashboardPage extends Component {
render() {
return (
<div>
<section className="has-small__padding has-grey__bg">
<UserAvtar />
</section>
<section className="has-small__padding">
<Grid>
<SectionHeaderOfCards title="Recommended Matches" />
<OwlCarousel margin={10} >
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
</OwlCarousel>
</Grid>
</section>
</div>
);
}
}
export default DashboardPage;
As default This code outputs 3 items at a time (As 3 is the default value in owl carousel) . I thought of I may initialised the value with 4 , hence tried ,
const options = {
items: 4,
};
But it's not working. There is nothing mentioned in its node package either. Anyone knows how to use owl carousel options in React Owl carousel ?
Apart I want to show 3 items for devices between 768px to 1200px , 2 items between 500px to 767px and 1 item for the devices below 499px.
Here is how normal owl carousel use the option to add responsiveness. https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html
How to achieve the same in React owl carousel ?

Answer 1

You need to add options object to OwlCarousel component.
Example:
<OwlCarousel margin={10} items={4} >
//...
</OwlCarouse>
OR
<OwlCarousel margin={10} {...options} >
//...
</OwlCarouse>

Answer 2

Best you can use:
render() {
const options = {
items: 1,
nav: true,
navText:["<div className='nav-btn prev-slide'></div>","<div className='nav-btn next-slide'></div>"],
rewind: true,
autoplay: true,
slideBy: 1,
dots: true,
dotsEach: true,
dotData: true
};
return (
<OwlCarousel ref="gallery" options={options}>
...
</OwlCarousel>
)