https://github.com/dolsem/perfectly-scrollable

https://github.com/dolsem/perfectly-scrollable

Last synced: 24 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/dolsem/perfectly-scrollable
• Owner: dolsem
• License: mit
• Created: 2022-05-24T17:43:05.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-06-07T17:52:50.000Z (over 2 years ago)
• Last Synced: 2024-11-02T19:33:54.857Z (about 1 month ago)
• Language: TypeScript
• Size: 34.2 KB
• Stars: 14
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-solid-js - Perfectly Scrollable - scrollable)) (📦 Components & Libraries / UI Components)

README

        
# Perfectly Scrollable

[![size](https://img.shields.io/bundlephobia/minzip/perfectly-scrollable?style=for-the-badge)](https://bundlephobia.com/package/perfectly-scrollable)

[![](https://img.shields.io/npm/v/perfectly-scrollable?style=for-the-badge)](https://www.npmjs.com/package/perfectly-scrollable)

[![](https://img.shields.io/npm/dw/perfectly-scrollable?style=for-the-badge)](https://www.npmjs.com/package/perfectly-scrollable)

SolidJS higher-order component for [Perfect Scrollbar](https://perfectscrollbar.com/).

## Installation

```bash

npm install perfectly-scrollable

```

## Example Usage

Define a scrollable component like this:

```tsx

// MyComponent.tsx

import { PerfectlyScrollable } from 'perfectly-scrollable';

import { Component } from 'solid-js';

export interface MyComponentProps {

  ref?: JSX.IntrinsicAttributes['ref'];

  title: string;

} 

const MyComponent: Component => (props) => {

  return (

    // Make sure to pass the ref down to the element you want to make scrollable

    // You should also make sure the CSS position property is set on the element

    


      
{props.title}

    

  );

};


export default PerfectlyScrollable(MyComponent);

```

The resulting component props will include all `MyComponent` props and [all Perfect Scrollbar props](https://perfectscrollbar.com/#section-options):

```tsx

// App.tsx

import MyComponent from './MyComponent.tsx';

import { Component } from 'solid-js';

export default () => {

  return (

    

  );

};

```

You can add Perfect Scrollbar to native elements as well:

```tsx

// MyComponent.tsx

import { PerfectlyScrollable } from 'perfectly-scrollable';

import { Component } from 'solid-js';

const ScrollableDiv = PerfectlyScrollable('div');

export interface MyComponentProps {

  ref?: JSX.IntrinsicAttributes['ref'];

  title: string;

} 

const MyComponent: Component => (props) => {

  return (

    

      
{props.title}

    

  );

};


export default MyComponent;

```

## Demo

View a functional demo on CodeSandbox: https://codesandbox.io/s/nxso2r.