CODEWITHSUNDEEP
reactjsnpm
SkinnyBetas
SkinnyBetas

Reputation: 501

Trying to get react-perfect-scrollbar working in React app

So i'm new to React and trying to add a scroll bar to app. I've installed react-perfect-scrollbar and imported it to my app. After following instructions as specified I can't get a scroll bar to show... I imagine i'm making a very basic mistake but I can't work it out. I'm not fiddling with custom options or anything yet, i'm simply trying to display a scroll bar

import PerfectScrollbar from 'react-perfect-scrollbar';
import 'react-perfect-scrollbar/dist/css/styles.css';

<PerfectScrollbar>
    <p> test 1 </p>
    <p> test 2 </p>
</PerfectScrollbar>

Upvotes: 2

Views: 14991

Answers (2)

tarzen chugh
tarzen chugh

Reputation: 11257

You are not providing correct css for scrollbar to be shown. Working codesandbox code here

Example.js

import React, { Component } from "react";
import ScrollBar from "react-perfect-scrollbar";
import "react-perfect-scrollbar/dist/css/styles.css";

import "./example.scss";

class Example extends Component {
  render() {
    return (
      <div className="example">
        <ScrollBar component="div">
          <div className="content" />
        </ScrollBar>
      </div>
    );
  }
}

export default Example;

example.scss

.example {
  width: 400px;
  height: 400px;

  .content {
    background: green;
    width: 800px;
    height: 480px;
  }
}

Hope that helps!!!

Upvotes: 7

turokorut
turokorut

Reputation: 49

Have you tried to put your items inside DIV?

import PerfectScrollbar from 'react-perfect-scrollbar';
import 'react-perfect-scrollbar/dist/css/styles.css';

<PerfectScrollbar>
<div>
   <p> test 1 </p>
   <p> test 2 </p>
</div>
</PerfectScrollbar>

Upvotes: 4

Related Questions