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

@opuscapita/react-list-items

1.0.1 • Public • Published

react-list-items

Description

Renders a custom element or by default a string m/n with the navigation icons 'previous' and 'next' to list items from the list.

Installation

npm install @opuscapita/react-list-items

Demo

View the DEMO

Builds

UMD

The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.

API

ListItems

Prop name Type Default Description
id string 'oc-list-items' Unique HTML id attribute
className string '' Custom className
disabled bool false A sign of a disabled status of navigation icons
goToItem function required Callback that is called when navigation to another item should happen
itemElement element null Custom component to render between navigation icons. By default it renders a string [m/n]
itemId [number, string] required Initially selected item id
itemIds list required List of item ids

Code example

import React from 'react';
import { List } from 'immutable';
 
import ListItems from '@opuscapita/react-list-items';
 
export default class ListItemsView extends React.Component {
  constructor(props) {
    super(props);
    this.state = { currentItem: 3 };
  }
 
  componentWillMount() {
    this.itemIds = List([1, 2, 3, 4, 5]);
  }
 
  goToItem = (currentItem) => {
    this.setState({ currentItem });
  }
 
  render() {
    return (
      <ListItems
        goToItem={this.goToItem}
        id="listItemsExample"
        itemId={this.state.currentItem}
        itemIds={this.itemIds}
      />
    );
  }
}

Keywords

none

install

npm i @opuscapita/react-list-items

Downloadsweekly downloads

226

version

1.0.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability