react-custom-scrollbars#Scrollbars JavaScript Examples

The following examples show how to use react-custom-scrollbars#Scrollbars. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: coloredScrollbars.js From agility-website-gatsby with MIT License

7 votes

render() {
    return (
      <Scrollbars
        className="scrollbar-custom-c8"
        universal
        renderView={this.renderView}
        renderThumbHorizontal={this.renderThumb}
        renderThumbVertical={this.renderThumb}
        onUpdate={this.handleUpdate}
        {...this.props}/>
    );
  }

Example #2

Source File: Dropdown.js From bfx-hf-chart with Apache License 2.0

6 votes

render () {
    const { label, children } = this.props
    const { open } = this.state

    return (
      <div className='bfxc__dropdown-wrapper'>
        <p onClick={this.onToggle}>{label}</p>

        {open && (
          <div className='bfxc__dropdown-menu'>
            <Scrollbars
              renderThumbVertical={({ style, ...props }) => (
                <div
                  style={{
                    ...style,
                    backgroundColor: '#333',
                  }}

                  {...props}
                />
              )}
            >
              {children}
            </Scrollbars>
          </div>
        )}
      </div>
    )
  }

Example #3

Source File: scrollbars-with-scroll-shadows.js From cloudflare-docs-engine with Apache License 2.0

6 votes

render() {
    const { children, shadowClassName, ...props } = this.props

    return (
      <Scrollbars
        ref="scrollbars"
        onUpdate={this.handleUpdate}
        renderTrackVertical={props => (
          <div {...props} className="Scrollbars--track Scrollbars--track-vertical"/>
        )}
        renderThumbVertical={props => (
          <div {...props} className="Scrollbars--thumb Scrollbars--thumb-vertical"/>
        )}
        {...props}
      >
        <div className={shadowClassName} ref="shadow"/>
        {children}
      </Scrollbars>
    )
  }

Example #4

Source File: Scrollbar.js From pathways with GNU General Public License v3.0

6 votes

render() {
    return (
      <Scrollbars
        onScroll={this.handleScroll}
        onScrollFrame={this.handleScrollFrame}
        onScrollStart={this.handleScrollStart}
        onScrollStop={this.handleScrollStop}
        onUpdate={this.handleUpdate}
        renderView={this.renderView}
        renderTrackHorizontal={this.renderTrackHorizontal}
        renderTrackVertical={this.renderTrackVertical}
        renderThumbHorizontal={this.renderThumbHorizontal}
        renderThumbVertical={this.renderThumbVertical}
        autoHide
        autoHideTimeout={1000}
        autoHideDuration={200}
        autoHeight
        // autoHeightMin={0}
        autoHeightMax={1000}
        thumbMinSize={30}
        // universal={true}
        {...this.props} />
    );
  }

Example #5

Source File: App.js From jee-dashboard with GNU General Public License v3.0

6 votes

render () {
    return (
      <div className='App'>
        <AppHeader />
        <Scrollbars autoHide>
          <div className='App-container'>
            <AppMain />
          </div>
        </Scrollbars>
        <div className='App-footer'>
          <AppFooter />
        </div>
      </div>
    )
  }

Example #6

Source File: List.js From social-media-strategy-fe with MIT License

5 votes

List = ({ list, user }) => {
	const { listContainer, postsContainer } = useStyles();

	return (
		<Draggable key={list.id} draggableId={list.id} index={list.index}>
			{(provided, snapshot) => (
				<div
					className={listContainer}
					ref={provided.innerRef}
					{...provided.draggableProps}
				>
					<ListHeader
						list={list}
						dragHandleProps={provided.dragHandleProps}
						user={user}
					/>
					<Droppable
						direction="vertical"
						droppableId={String(list.id)}
						type="post"
					>
						{(provided, snapshot) => (
							<div
								{...provided.droppableProps}
								ref={provided.innerRef}
								className={postsContainer}
								style={{
									background: snapshot.isDraggingOver
										? "aliceblue"
										: "transparent",
								}}
							>
								<Scrollbars autoHide>
									{list.posts?.map((post, index) => (
										<Post key={post.id} post={post} />
									))}
									<CreatePostButton listId={list.id} />
								</Scrollbars>
								{provided.placeholder}
							</div>
						)}
					</Droppable>
				</div>
			)}
		</Draggable>
	);
}

Example #7

Source File: index.jsx From react-antd-admin-template with MIT License

5 votes

render() {
    const path = this.props.location.pathname;
    const openKey = this.state.openKey;
    return (
      <div className="sidebar-menu-container">
        <Scrollbars autoHide autoHideTimeout={1000} autoHideDuration={200}>
          <DragDropContext onDragEnd={this.onDragEnd}>
            <Droppable droppableId="droppable">
              {(provided, snapshot) => (
                <div {...provided.droppableProps} ref={provided.innerRef}>
                  {this.state.menuTreeNode.map((item, index) => (
                    <Draggable
                      key={item.key}
                      draggableId={item.key}
                      index={index}
                    >
                      {(provided, snapshot) => (
                        <div
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                        >
                          <Menu
                            mode="inline"
                            theme="dark"
                            onSelect={this.handleMenuSelect}
                            selectedKeys={[path]}
                            defaultOpenKeys={openKey}
                          >
                            {item}
                          </Menu>
                        </div>
                      )}
                    </Draggable>
                  ))}
                </div>
              )}
            </Droppable>
          </DragDropContext>
        </Scrollbars>
      </div>
    );
  }

Example #8

Source File: TagList.jsx From react-antd-admin-template with MIT License

5 votes

render() {
    const { left, top, menuVisible } = this.state;
    const { taglist, history } = this.props;
    const currentPath = history.location.pathname;
    return (
      <>
        <Scrollbars
          autoHide
          autoHideTimeout={1000}
          autoHideDuration={200}
          hideTracksWhenNotNeeded={true}
          renderView={(props) => (
            <div {...props} className="scrollbar-container" />
          )}
          renderTrackVertical={(props) => (
            <div {...props} className="scrollbar-track-vertical" />
          )}
        >
          <ul className="tags-wrap" ref={this.tagListContainer}>
            {taglist.map((tag) => (
              <li key={tag.path}>
                <Tag
                  onClose={this.handleClose.bind(null, tag)}
                  closable={tag.path !== "/dashboard"}
                  color={currentPath === tag.path ? "geekblue" : "gold"}
                  onClick={this.handleClick.bind(null, tag.path)}
                  onContextMenu={this.openContextMenu.bind(null, tag)}
                >
                  {tag.title}
                </Tag>
              </li>
            ))}
          </ul>
        </Scrollbars>
        {menuVisible ? (
          <ul
            className="contextmenu"
            style={{ left: `${left}px`, top: `${top}px` }}
            ref={this.contextMenuContainer}
          >
            <li onClick={this.handleCloseOtherTags}>关闭其他</li>
            <li onClick={this.handleCloseAllTags}>关闭所有</li>
          </ul>
        ) : null}
      </>
    );
  }

Example #9

Source File: App.js From mewbot-autocatcher with MIT License

5 votes

render(){
        return(
            <Scrollbars autoHide={false} renderView={this.renderView} renderThumbHorizontal={this.renderThumb} renderThumbVertical={this.renderThumb} {...this.props}/>
        )
    }

Example #10

Source File: Contacts.js From facebook-clone with MIT License

5 votes

Contacts = () => {
  const classes = Style();

  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      const response = await axios.get("https://breakingbadapi.com/api/characters");
      setUsers(response.data);
    };
    fetchUsers();
  }, []);

  return (
    <Paper elevation={0} className={classes.contacts}>
      <Scrollbars autoHide autoHideDuration={200}>
        <Divider />
        <div className={classes.contacts__tab}>
          <h4>Your Pages</h4>
          <MoreHorizIcon />
        </div>
        <Divider />
        <div className={classes.contacts__tab}>
          <h4>Contacts</h4>
          <SearchIcon />
          <MoreHorizIcon />
        </div>
        {users.map(({ char_id, name, img }) => (
          <InfoBar
            key={char_id}
            Source={
              <Tooltip placement="left" title={name} arrow>
                <Avatar src={img} size={100} />
              </Tooltip>
            }
            title={name}
            online={true}
            lastSeen={
              Math.floor(Math.random() * (3 - 1 + 1)) + 1 === 2 &&
              `${Math.floor(Math.random() * 10) + 1} h`
            }
            noTransform={true}
          />
        ))}
      </Scrollbars>
    </Paper>
  );
}

Example #11

Source File: Sidebar.js From facebook-clone with MIT License

5 votes

Sidebar = () => {
  const classes = Style();

  const [open, setOpen] = useState(false);

  const { photoURL, displayName } = useSelector((state) => state.user);

  const toggle = () => {
    setOpen(!open);
  };

  return (
    <Paper elevation={0} className={classes.sidebar}>
      <Scrollbars autoHide autoHideDuration={200}>
        {/* User info */}
        <InfoBar key={displayName} Source={<Avatar src={photoURL} />} title={displayName} />
        {/* Top item */}
        {topRows.map(({ src, title }, i) => (
          <InfoBar
            key={`info-top-${i}`}
            Source={<Avatar src={src} />}
            title={title}
            transform={true}
          />
        ))}
        {/* Bottom items (display only when clicks show more button) */}
        {open && (
          <>
            {bottomRows.map(({ src, title }, i) => (
              <InfoBar key={`info-bottom-${i}`} Source={<Avatar src={src} />} title={title} />
            ))}
          </>
        )}
        {/* Toggle button (show more /show less) */}
        <InfoBar
          key={"expand-icon"}
          Source={
            <Avatar>
              <ExpandMoreIcon style={{ transform: open && "rotate(180deg)" }} />
            </Avatar>
          }
          title={open ? "See Less" : "See More"}
          onClick={toggle}
        />

        <Divider style={{ margin: "5px 10px" }} />

        {/* Your links section */}
        <h4 style={{ margin: "10px 10px" }}>Your short cuts</h4>
        <>
          {yourLinks.map(({ src, title }, i) => (
            <InfoBar key={`info-links-${i}`} Source={<Avatar src={src} />} title={title} />
          ))}
        </>

        <Divider style={{ margin: "5px 10px" }} />

        {/* About Author */}
        <div className={classes.about__author}>
          <h4>Contact Developer</h4>
          <div>
            {author.map(({ src, url }, i) => (
              <a href={`${url}`} key={`author-link-${i}`} rel="noreferrer nofollow" target="_blank">
                {src}
              </a>
            ))}
          </div>
        </div>
      </Scrollbars>
    </Paper>
  );
}

Example #12

Source File: CustomScrollbars.js From DMS_React with GNU Affero General Public License v3.0

5 votes

CustomScrollbars = (props) => <Scrollbars  {...props} autoHide
                                                 renderTrackHorizontal={props => <div {...props}
                                                                                      style={{display: 'none'}}
                                                                                      className="track-horizontal"/>}/>

Example #13

Source File: ColorShadesList.jsx From omatsuri with MIT License

5 votes

export default function ColorShadesList({
  value,
  onChange,
  onDelete,
  canDelete,
  saturation,
  darken,
}) {
  const [theme] = useTheme();
  const clipboardAll = useClipboard();
  const clipboard = useClipboard({ timeout: 500 });
  const values = generateShades({ steps: 7, value, saturation, darken });
  const copyAll = () => clipboardAll.copy(JSON.stringify(values, null, 2));

  const items = values.map((shade, index) => (
    <button
      type="button"
      key={index}
      className={classes.shade}
      onClick={() => clipboard.copy(shade)}
    >
      <div className={classes.preview} style={{ backgroundColor: shade }} />
      <div className={classes.value}>{shade}</div>
    </button>
  ));

  return (
    <Background
      className={cx(classes.wrapper, classes[theme], { [classes.copied]: clipboard.copied })}
    >
      <div className={classes.header}>
        <HexInput value={value} onChange={onChange} />

        <div className={classes.controls}>
          <button
            className={cx(classes.copyAll, { [classes.copyAllCopied]: clipboardAll.copied })}
            type="button"
            onClick={copyAll}
          >
            {clipboardAll.copied ? 'Copied' : 'Copy all values'}
          </button>

          {canDelete && (
            <button type="button" className={classes.remove} onClick={onDelete}>
              Remove
            </button>
          )}
        </div>
      </div>
      <Scrollbars style={{ width: '100%', height: 110 }}>
        <div className={classes.shades}>{items}</div>
      </Scrollbars>
    </Background>
  );
}