Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @kapost/react-component-slider with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reactComponentSlider = require("@kapost/react-component-slider")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@kapost/react-component-slider v1.0.5

Responsive React component slider to help with overflowing, horizontally-oriented components

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free