This is horizontal scrolling menu component for React. Menu component has adaptive width, just set width for parent container. Items width will be determinated from css styles.
Note: Don’t have much time for support project. Any help apprecciated.
For navigation you can use arrows, mouse wheel or just drag items.
Component return items position, selected item and click event from callbacks.
Possible set default position and selected item on initialization.
Add star if you like project :)
source-shell
npm install --save react-horizontal-scrolling-menu
In project:
source-js
import React, { Component } from 'react';
import ScrollMenu from 'react-horizontal-scrolling-menu';
import './App.css';
// list of items
const list = [
{ name: 'item1' },
{ name: 'item2' },
{ name: 'item3' },
{ name: 'item4' },
{ name: 'item5' },
{ name: 'item6' },
{ name: 'item7' },
{ name: 'item8' },
{ name: 'item9' }
];
// One item component
// selected prop will be passed
const MenuItem = ({text, selected}) => {
return <div
className={`menu-item ${selected ? 'active' : ''}`}
>{text}</div>;
};
// All items component
// Important! add unique key
export const Menu = (list, selected) =>
list.map(el => {
const {name} = el;
return <MenuItem text={name} key={name} selected={selected} />;
});
const Arrow = ({ text, className }) => {
return (
<div
className={className}
>{text}</div>
);
};
const ArrowLeft = Arrow({ text: '<', className: 'arrow-prev' });
const ArrowRight = Arrow({ text: '>', className: 'arrow-next' });
const selected = 'item1';
class App extends Component {
constructor(props) {
super(props);
// call it again if items count changes
this.menuItems = Menu(list, selected);
}
state = {
selected
};
onSelect = key => {
this.setState({ selected: key });
}
render() {
const { selected } = this.state;
// Create menu from items
const menu = this.menuItems;
return (
<div className="App">
<ScrollMenu
data={menu}
arrowLeft={ArrowLeft}
arrowRight={ArrowRight}
selected={selected}
onSelect={this.onSelect}
/>
</div>
);
}
}
In App.css
source-css-scss
.menu-item {
padding: 0 40px;
margin: 5px 10px;
user-select: none;
cursor: pointer;
border: none;
}
.menu-item-wrapper.active {
border: 1px blue solid;
}
.menu-item.active {
border: 1px green solid;
}
.scroll-menu-arrow {
padding: 20px;
cursor: pointer;
}
You can clone repository and run demo project from examples folder.
git clone https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu
cd react-horizontal-scrolling-menu/examples
npm install
npm run start
You can scroll left/right via componentRef.handleArrowClick()
and componentRef.handleArrowClickRight()
functions.
Can get other properties in component state - const { leftArrowVisible, rightArrowVisible, selected, translate } = componentRef.state
Can simulate click with componentRef.onItemClick('item4')
Can select and scroll to item with componentRef.scrollTo('item14')
Menu items must have width, if items contains images and images don’t loaded yeat it can be problem. Generally component will try to determine width of items, if it can’t you can assign ref to component and call $ref.setInitial() manually when items have width for sure.
Browser must support requestAnimationFrame or use polyfill.
It can doesn’t work in IE, and I don’t care, I am not a necrophile.(if you need it you can make PR, I will merge)
My first npm project. Sorry for my english.
Any contribution and correction appreciated. Just fork repo, commit and make PR, don’t forget about tests.
1 Fork the repo:
npm install
in root foldernpm link
npm install && npm link react-horizontal-scrolling-menu
npm run start
in root folder and after that in examples folders2 Write code! Add some feature or fix bug.
3 Check that all tests passed and add tests for your code.
npm run test:watch
for run tests in watch mode4 Update readme and example(if needed)
5 Make commit and Pull Request
Author: asmyshlyaev177
GitHub: https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu
#reactjs #javascript