Nonchalantly Performs Magic
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

@kapost/react-component-slider

1.0.5 • Public • Published

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

install

npm i @kapost/react-component-slider

Downloadsweekly downloads

0

version

1.0.5

license

MIT

repository

githubgithub

last publish

collaborators

  • avatar