Responsive React component slider to help with overflowing, horizontally-oriented components
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib/stylesheets
modules
.babelrc
.eslintrc
.gitignore
README.md
package.json
yarn.lock

README.md

React Component Slider

This component is useful for situations where you are trying to fit components (e.g. menu/tab navigation) into a horizontal space that could be limited by screen width. It is a simple, lightweight approach that adds scroll arrows when the contents overflow.

Example menu navigation

Installation

Add package:

# yarn
yarn add @kapost/react-component-slider

# npm
npm install --save @kapost/react-component-slider

Import component:

import ComponentSlider from "@kapost/react-component-slider";

Import base styles (modify for your pipeline tool of choice):

@import "@kapost/react-component-slider/lib/stylesheets/component-slider"

Quick Start

<ComponentSlider>
  { inline elements }
</ComponentSlider>

Props

children (node, required)

Render any arbitrary number of children. This component is designed for inline / horizontally-oriented elements.

renderLeftArrow / renderRightArrow (func, optional)

Override what renders for the arrows/navigation. Defaults to:

    renderLeftArrow: () => <span>&larr;</span>,
    renderRightArrow: () => <span>&rarr;</span>,

Why are there no tests?

It's difficult to test resizing behavior of this nature without writing integration tests. Due to the simplicity of the component, I opted not to do that.

License

MIT