/Javascript/React/Horizontal scrollview in react js

Horizontal scrollview in react js

import React, { Component } from 'react';import ScrollMenu from 'react-horizontal-scrolling-menu';import './App.css'; // list of itemsconst 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 passedconst MenuItem = ({text, selected}) => {  return <div    className={`menu-item ${selected ? 'active' : ''}`}    >{text}</div>;}; // All items component// Important! add unique keyexport 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>    );  }}

Source: npmjs.com

Similar codes

0 vote292 views1 answer
How to convert timestamp to date in react native
Javascript React
0 vote295 views1 answer
React native showing double header stack and drawer menu
Javascript React
0 vote271 views3 answers
Router dom react v6
Javascript React
0 vote287 views7 answers
How to generate debug build in react native
Javascript React
3 votes284 views1 answer
How to go to another page onclick in react
Javascript React
1 vote309 views1 answer
React native run ios select simulator
Javascript React
5 votes326 views3 answers
CocoaPods could not find compatible versions for pod "ReactCommon/jscallinvoker"
Javascript React
108 votes315 views2 answers
Make react project
Javascript React
1 vote294 views1 answer
React-router-dom v6 redirect
Javascript React
0 vote313 views1 answer
Box-shadow: 0px 4px 8px rgba(164, 188, 223, 0.15); to react native
Javascript React