@open-norantec/ui-libraries v1.0.0-alpha.61

Scroller Coaster

A customizable, flexible, and elegant scrollbar component for React.js and Next.js.

Live Demo

Features

• 🎯 Support for both vertical and horizontal scrolling
• 🌐 RTL layout support
• 🎨 Fully customizable styling
• 🔄 Smooth scrolling experience
• ⚡ High performance, no jank
• 📱 Responsive design

Installation

npm install scroller-coaster

Basic Usage

import { ScrollerCoaster } from 'scroller-coaster';

const App = () => {
  return (
    <ScrollerCoaster
      style={{
        width: '400px',
        height: '300px',
        border: '1px solid #ccc'
      }}
    >
      {/* Your content */}
    </ScrollerCoaster>
  );
};

API

ScrollerCoaster Props

ScrollerCoasterTrackProps

Examples

Custom Scrollbar Styling

<ScrollerCoaster
  horizontalTrackProps={{
    showMode: 'always',
    size: 8,
    thumbProps: {
      style: {
        backgroundColor: '#6366f1',
        borderRadius: '4px'
      }
    }
  }}
  verticalTrackProps={{
    showMode: 'hover',
    size: 8,
    thumbProps: {
      style: {
        backgroundColor: '#6366f1',
        borderRadius: '4px'
      }
    }
  }}
>
  {/* Content */}
</ScrollerCoaster>

RTL Support

<ScrollerCoaster
  dir="rtl"
  style={{
    width: '400px',
    height: '300px'
  }}
>
  {/* RTL content */}
</ScrollerCoaster>

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Development

# Install dependencies
npm install

# Run development environment
npm run demo

# Build library
npm run build:lib

# Build demo
npm run build:demo

License

MIT

Contributing

1. Fork the project
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request