Simplest React horizontal menu library.
- React menu components for easy and fast web development.
- Support Right-To-Left smooth scrool.
- Low bundle size with fantastic performance.
- Flexible menu positioning.
- Easy styling and customisation.
with npm
npm i react-simple-horizontal-menu
with yarn
yarn add react-simple-horizontal-menu
import React, { useState } from 'react';
import { HorizontalMenu } from 'react-simple-horizontal-menu';
import '../../node_modules/react-simple-horizontal-menu/dist/styles/core.css';
const items = [...Array(100)].map((_, i) => {
return {
id: i,
label: `No. ${i}`,
};
});
export default function Test() {
const [id, setId] = useState(0);
const onChange = (_id: number) => {
setId(_id);
};
const getLabel = items.find((item) => item.id === id)?.label ?? null;
return (
<div>
dd
<HorizontalMenu items={items} onChange={onChange} rtl={true} />
<div
style={{
marginTop: '16px',
display: 'flex',
width: '100%',
justifyContent: 'center',
}}
>
Selected value: {getLabel}
</div>
</div>
);
}
MIT @ devinoue