asmyshlyaev177 / react-horizontal-scrolling-menu Goto Github PK

How do i put space between menu items ?

When I compiled the application using the component, 0.5.3, with TypeScript 3.3, I got the following error:

TypeScript error: Generic type 'ReactElement<P, T>' requires between 1 and 2 type arguments.  TS2707

     5 |     arrowClass: string;
     6 |     arrowDisabledClass: string;
  >  7 |     arrowLeft: React.ReactElement | null;
       |                ^
     8 |     arrowRight: React.ReactElement | null;
     9 |     clickWhenDrag: boolean;
    10 |     dragging: boolean;

In my own experiment, arrowLeft?: JSX.Element and arrowRight?: JSX.Element would work just as fine.

If i pass to ur library null value, u return me "null"

Is there an explanation for this?

Whenever my selected item changes within the menu, the menu does not scroll to the selected item

Tried to execute it in IE but unable to render this. Please help

I decided to clone your repository to try out some of the examples but on running npm install, execution fails. Below is the log of this:

D:\Samples>cd react-horizontal-scrolling-menu
D:\Samples\react-horizontal-scrolling-menu>npm install
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated [email protected]: Critical security bugs fixed in 2.5.5
npm WARN deprecated [email protected]: Package no longer supported. Contact [email protected] for more info.
npm WARN deprecated [email protected]: 1.2.0 should have been a major version bump
npm ERR! code 1
npm ERR! Command failed: C:\cygwin\bin\git.EXE clone --mirror -q https://github.com/maicki/why-did-you-update.git C:\Users\admin\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-0dae8b53\.git --config core.longpaths=true
npm ERR! /cygdrive/c/Users/admin/AppData/Roaming/npm-cache/_cacache/tmp/git-clone-0dae8b53/C:\Users\admin\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-0dae8b53\.git: No such file or directory
npm ERR!
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\admin\AppData\Roaming\npm-cache\_logs\2018-08-15T23_33_32_311Z-debug.log

Also the examples:

D:\Samples\react-horizontal-scrolling-menu>cd examples

D:\Samples\react-horizontal-scrolling-menu\examples>npm install
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "link:": link:..

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\admin\AppData\Roaming\npm-cache\_logs\2018-08-15T23_38_02_853Z-debug.log

How can this be fixed?

Does this component allow me to use my own arrow functions? Somewhere outside the div itself and call its forward/backward actions.

I want the arrow buttons to be above the scrolling div. Apart from this great component and I am loving it.

When i click on an item, it scrolls me back to the first items at the beginning. I tried to use the given example from the docs. I don't know how to fix that.
So i copied and pasted the example in a new create-react-app project. Its all loaded. I have 17 items. When i clicked on 17th item i get scrolled back to beginning.

Hi !

I'm noob --'

I need to scroll just one item at a time, can i do that with a simple solution?

Describe the bug
Some items with relatively short height seems to align it's top onto center.

Outmost wrapper doesn't seem to be oversized.

I tried but couldn't reproduce in your example. I guess it's because of some subtle differences from my project. And I'm trying to figure it out.

Hopefuly you encountered similar issues and know what's happening?

Desktop, Smartphone

• chrome, safari

Initial translate doesn't work when set it as 0 or -1.

<ScrollMenu  
       data={data}  
       arrowLeft={ArrowLeft}  
       arrowRight={ArrowRight}  
       translate={0}  
       wheel={false}  
       selected={selected}  
       onSelect={onSelect}  
/>

Got the following html after refresh web page.
<div class="menu-wrapper--inner" style="width: 9900px; transform: translate3d(51px, 0px, 0px); transition: transform 0.4s ease 0s; white-space: nowrap; text-align: left; user-select: none;">

On my project after initialization variable mounted remains false until we trigger some rerendering.
Because of this clicking to Arrows leads to instant (0s) transition to destination point.
Unfortunately I can not reproduce this behavior on demo page (even by adding react-router).
I don't know why mounter remains false.. but do we need this || !mounted condition here?

export const innerStyle = ({ translate, dragging, mounted, transition }) => {
  return {
    ...
    transition: `transform ${dragging || !mounted ? '0' : transition}s`
  };
};

Or, another question:
There is setMounted function with variable initialized which is used only in this function. What's the reason of this variable? Also, setMounted is calling in componentDidUpdate only, shouldn't we call it in componentDidMount too?

My settings

<ScrollMenu
  data={data}
  arrowLeft={<Arrow type="prev" />}
  arrowRight={<Arrow type="next" />}
  onSelect={this.onSelect}
  wheel={false}
  alignCenter={false}
  wrapperClass={style.sliderInner}
  itemClass={style.sliderItem}
/>

Is your feature request related to a problem? Please describe.
I feel the scrolling is a little slow in my implementation and would like a way to scale this speed

Describe the solution you'd like
A setting that lets you set a translation speed

How can i make the item clickable on single click rather then double click

Black circle - left mouse click
Green circle - right mouse click

Does this component support RTL alignment? If supports please tell me the process.

I would like to use this to make a horizontal scroll of Avatar images, instead of plain text, is this possible? If so, how? The examples I've seen all use the same data souce (a list of objects with name key).

Thanks in advance!

In your example https://asmyshlyaev177.github.io/react-horizontal-scrolling-menu/ if I type in the input item19, this item will be active but it is hidden, it is not automatically scrollable to the visible area or centered. Is it possible to make it visible if I programmatically choose not visible menu item?

Please try here

When window width increases, elements are centered properly, it's ok.
But when window width decreases, elements are positioned slightly on left from center.

Demo:

Example on codesandbox

There is some inactive space on the left, when dragging items.
When you drag to the right - it scrolls back to the center, as intended.
Same happens when you scroll way left, it scrolls back to the center, it's ok.
But when you scroll slightly to the left, there is an area where items stuck and do not scrolls back to the center.

When using the library with Gatsby, the production build doesn't work when the it uses the .mjs file. Reverting back to the JS file fixes the issue.

For example if I have just 4-5 items I do not need to show chevrons as there isn't need in scrolling

Maybe I am not understanding React, or how this component works, but should every drag and arrow click result in recomputing all the elements in your menu?

Even in the codesandbox demo provided in the documention, I noticed that the Menu functional component on line 39 iterates through every item in the list repeatedly during drag events. Is there a way to stop this?

I am using this react-horizontal-scrolling-menu for my personal use and here i do have larger width items which does not fit in my wrapping bar.

Here you guys already do have feature scrollToSelected onSelect it automatically scroll to the front of that particular item.

But can we have feature on which we can directly scrollTo the end of the selected item??

Here link of stackoverflow

Don't know when it was broken, all tests passed. Fix and add more tests.

For example for NaN in translate props.

Hello

Other than that - great plugin, well done!

Describe the bug
The items snap back immediately after I pull them

To Reproduce
Steps to reproduce the behavior:
I create a card in React and programmatically fill the list via componentDidMount()

I then cannot pull permanently over them.

Example repo
This is in cordova, I don't have a working example of the bug but I can implement one later

Desktop (please complete the following information):
Cordova - iOS

Smartphone (please complete the following information):
iPhone 8 and iOS simulator

Thanks for your library!
I want to use this library, but how to remove active btn border:

just the yellow part

Describe the bug
After importing ScrollMenu, using it in JSX leads to typescript error:

import ScrollMenu from 'react-horizontal-scrolling-menu'

function Menu() {
  return <ScrollMenu alignCenter={false} ...>
}

Message for ScrollMenu:

JSX element class does not support attributes because it does not have a 'props' property

After some tests I found out, that #63 could fix this issue. Would this be the correct solution?

Running the same app without electron, the buttons work. But once it's on electron they become unresponsive.

Hi.
Thanks for great component!
Unfortunately I met small issue: It looks like programmatically switching selected element is not working.
I am modifying "selected" property but it has no effect.
It is a bug or there is some undocumented tweaks?

BR, Vlad

Hey there!

I've faced an issue while using images as items in the scroll menu - Basically, the elements (images) render perfectly, but both the scroll functionality and arrow buttons don't work.

This behaviour is solved when I refresh the page. - Any thoughts where this may come from?

I'm using a map() function to return each menu item (image).

Using ie11/edge user cannot switch between tabs

No tab order is assigned through the menu items. Could I suggest providing an option to render the menu items as buttons, links, or the current simple divs?

Hi, I had this error when unmounting the component:

TypeError: null is not an object (evaluating 'elem.getBoundingClientRect')

I checked the utils.js file for the getClientRect() function and made a little change that fixed the problem.

Before:

const getClientRect = elem => {
  const { x, left, width } = elem.getBoundingClientRect();
  return { width, x: !isNaN(x) ? +x : +left };
};

After:

const getClientRect = elem => {
  const { x, left, width } = elem ? elem.getBoundingClientRect() : {x:0, left:0, width:0};
  return { width, x: !isNaN(x) ? +x : +left };
};```

Maybe it can be added to the next version, or maybe I make a PR for this.

First of all, thanks for your library.
I want to use this library, but I hope to remove default style.
Especially this.

So I tried something to remove it

  <ScrollMenu
        data={menu}
        arrowLeft={ArrowLeft}
        arrowRight={ArrowRight}
        selected={selected}
        menuStyle={null}
        wrapperStyle={null}
        alignCenter={false}
      />

and in css file

.menu-wrapper--inner {
  width: 100%
}

But it didn't work anything.
Is there any way to remove or modify default styles?

Is there away to show the scrollbar to scroll through the items?
Is there a -webkit-scrollbar property being set to display:none somewhere we can override, or would it be a custom react item programmed to reflect the current position of the menu?

Install Airbrake in 2 easy steps:

Step 1: Add the library
Include via CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/airbrake-js/1.4.6/client.min.js"></script>

We also support installation via npm and Bower.

Step 2: Copy this config snippet to your app.js file

(You can find your project ID and API KEY with your project's settings):

var airbrake = new airbrakeJs.Client({
  projectId: <Your project ID>,
  projectKey: '<Your project API Key>'
});

To test that Airbrake has been installed correctly in your JavaScript project, just open up the JavaScript console in your internet browser and paste in:

airbrake.notify('hey there!')

Visit official GitHub repo for more info on alternative configurations and advanced options.

Consider such case: user starts dragging the list, moved a lot from side to side but luckily stops exactly at same position it was picked.
Item will be selected, but that's not what user needs.
How about counting amount of pixels moved by X axis instead of comparing start/stop positions?

Hi ,
I'm new with react. Is the onClick function active on this component? Because I have a series of buttons with the onClick function in the menuItem but my onClick function is not called.

Please check this link

There is toggle button, click it few times.
You would notice that every time when lists appears, there is transition to initial position in the first list.
This transition reproduces with small amount of items, when full width of all items is smaller than viewport of list's width.
Second list does not have this transition.

It's very noticeable on my project because I use react-horizontal-scrolling-menu in rows that are rendered by ReactList. So every time I scroll the page, new react-horizontal-scrolling-menu elements renders and transition animation appears.
How do you think, is it possible to set initial position statically without transition?

btw in second list I've used

scrollToSelected
selected="item6"

and item 6 indeed appeared in the viewport, but not in center. This is not so important, just let you know.

When menu initially loading, width of scrolled items incorrectly counted. Scrolling area is too big, I scroll until blank space is visible wihtout any menu items.
When I click on one of the menu items, it works correctly and blank area isn't visible
Also, mounted is false on initial load

When I give new data in props to ScrollMenu, the list was not refresh automatically. I find in your shoulComponentUpdate, if you add :

const {data} = nextProps;
menuItems !== data (in return)

, the refresh is done. (There is maybe an other method, I start with React ^^)

Moreover, if you do also the centering of elements (or reorder), this become great. In any case, your component is very useful and matches to my need !! ;)

So the clickable arrows work fine to scroll and so does scrolling up and down on my touchpad..

But scrolling left and right on my touch pad i can only go right, if I go left i get pushed back right.. wonder how to fix it...

i'm not even able to run the source by its self just to play around with it yet...

not sure if somehow making the side buttons scroll too is breaking the ability to scroll left and right and a touchpad maybe or if your emulating a scroll bar and just haven't programed it

I'm really happy I found this almost works perfectly for me

When component receive translate prop in initial mount, onUpdate callback is not executed. This is due of this condition:

if (onUpdate && translate !== translateOld && translate !== lastTranslateUpdate) {

Sometimes translate and lastTranslateUpdate are equals to 0. So, If I remove the last part of the condition, then the behavior is the expected

if (onUpdate && translate !== translateOld /*&& translate !== lastTranslateUpdate*/) {

I think that the condition translate !== translateOld is enough.

Greetings from Chile!

Do you have plans to add typescript support ? Primarily, there are two ways -

1. Adding the project to DefinitelyTyped project so that users can have typescript support by installing @types/react-horizontal-scrolling-menu
2. Adding type declaration files (.d.ts) in this project itself.

If you are ready to merge a PR to add the declaration files to this repo itself, I can volunteer.

Hello, check this example please

Seems to be there is something wrong with offset calculations when alignCenter is false

Steps to reproduce:
Click right arrow (it works)
Click left arrow (it doesn't)
Also note the position of the list, now click to any item in the list, it jumps to the beginning immediately.

Settings:

<ScrollMenu
    ref={el => (this.menu = el)}
    data={menu}
    arrowLeft={ArrowLeft}
    arrowRight={ArrowRight}
    onUpdate={this.onUpdate}
    onSelect={this.onSelect}
    alignCenter={false}
    wheel={false}
  />
      </div

How easy would it be to implement inertia scrolling where you flick sideways and the items scroll first at fast and then slow down? Would be happy to help code this if you think its possible.