Search code examples
react-bootstrap

react-bootstrap carousel hidding controls on mobile

I want to hide controls on mobile devices but there is only true or false values in component props <Carousel controls={true}>. Is there any way to do this with react-bootstrap? Or maybe is another simple way?

Solution

  • On mount of the component, you can check to see the device size. After that, assess if the Carousel controls need to be false (on small devices) or true (on big devices).

    For example on functional components:

    function App(){
  const [controlsAreVisible, setControlsAreVisible] = useState(true);

  useEffect(()=>{

    // iPhone X width, for example
    if (window.innerWidth <= 375) {
      setControlsAreVisible(false)
    }

    // you can also set up event listeners here for "resize" for full responsiveness

  }, [])

  return(
    <Carousel controls={controlsAreVisible}>
    ...
  )
}