some-react-components / react-scrollchor Goto Github PK

thx a lot for component, it's very helpful

Is it right that I can't set variable in offset parameter in animation object?
I've tried to do so and it looks like component takes it only once during component build and ignore it changes after component did mount. It is a little strange that changing props don't cause component to rebuild.

I need it to make anchor view in the middle of screen instead of it's top part. Even if user will change browser window height. Thats why I need to use a variable.

<Scrollchor
    to={letter}
    key={letter}
    className={styles.listLettersItem}
    animate={{offset: this.state.offset}}>
    {letter}
</Scrollchor> 

In my case, I have body set to 100% height with absolute div inside. I want to scroll the div, not the body

Hi there,

I'm probably doing something dumb, but this one has me stumped.

I've got a styled.a component that I'm using as a button.

import styled from "react-emotion";
import { fontSize, space } from "styled-system";
import "typeface-exo-2";

export default styled.a`
  ${fontSize};
  ${space};
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 0.33em;
  border-style: solid;
  border-width: 1px;
  color: white;
  font-family: "Exo 2", sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  opacity: 1;
  text-decoration: none;
  transition: background-color 0.15s ease-in;
  text-transform: uppercase;
  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
`;

Scrollchor works beautifully when I do this:

<Button>
  <Scrollchor to="#ss-signup" animate={{ offset: 0, duration: 500 }}>
     soul surfer
  </Scrollchor>
</Button>

However, if I change the styled anchor component to export default styled.button ScrollChor stops working.

I've tried various things with "type=button" and role="button", and I've tried surrounding the Scrollchor element in an <a> tag, but nothing seems to get that working.

Again, it's probably something stupid, but I thought I'd ask 😄

Hi there, I think that the release notes for v 7.0.0 might need updating.

While the documentation is clear about the fact that you need to import the component as a named export, the release notes simply say that there were no breaking changes to the API vis-à-vis v 6.0.0, and I think that adding a note about that might facilitate teams' transitions towards the new version.

Thanks so much for all your hard work!

Experiencing this locally so was looking around to see if it was something I was doing wrong with my local config, but can recreate here:

https://runkit.com/embed/72cukzlpojly

Is there any way to stop it from changing location(url).

Hello,

I use HashRouter in my react app and the landing page is single-page which use react-scrollchor component to scroll to some section with animation. Say I defined #service section in the landing page, when I click Service and the page scroll to the anchor and finally the URL turn to /#/service(should be /#service), the page is blank. And I leave the example page here

I searched stackover and find https://github.com/rafrex/react-router-hash-link would work, and could you support HashRouter in scrollchor?

Thanks!

I used react-scrollchor for scrolling some hash links, everything just worked fine.
However, when I set animate prop to anything, the browser always pop-up the warning:

Warning: Unknown prop animate on tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
in a (created by Scrollchor)
in Scrollchor (created by Nav)
in div (created by Nav)
in nav (created by Nav)
in Nav (created by Layout)
in div (created by Layout)
in Layout (created by RouterContext)
in RouterContext (created by Router)
in Router

I set the duration to 200, and it worked properly except for the warning above.
Thanks!

Hey! I have a problem using component inside another tag component. resulting in error:

Warning:
validateDOMNesting(...): cannot appear as a descendant of . See NavItem > SafeAnchor > a > ... > Scrollchor > a.

This happens because it is not possible to change the base component like in the bootstrap componentClass prop. Do you guys intend to adjust that?

When the entire component is rendered on the browser screen the Scrollchor with #id works, but when the same component is kept in a div with overflow: scroll property in parent div it doesn't work.
I had the same issue with react-scroll Link.
They mentioned that react-scroll won't work inside a div.
Is this the same issue with react-scrollchor?

Hello!

Does this package work with React Router v4.0?

First, this rep is very good.

when i click the Anchor, it scrolls very smooth. but can url add hash? because i want to go back by the back button of browser.

@xehpuk Please rebase/merge "upstream-target-example" on "example" branch

Considering there have been no updates to master in 3 years I figured this might be the case, but I am seeing relatively recent issue comments so I'm not sure what to think.

I was getting a bunch of warnings from React about the fact that "components using new hooks will not have their legacy hooks called" or something along those lines, and seeing the last publish date made me go the fork route, but I wanted to mention this here in case there are any other active maintainers who would like to discuss the possibility of contributing all or some of my changes back "upstream" so to speak.

My fork currently lives at https://github.com/SeinopSys/react-scrollchor and is published to NPM under a namespace of mine that I use for package forks. The key points I wanted to address, and then did so:

1. Update all the dependencies/tooling to more recent versions (switched to Rollup instead of Babel)
2. Keep API as same as possible (partially failed due to the removal of the default export for the component, because Rollup was throwing a warning about it, and also hooks support meant a higher minimum React version)
3. TypeScript typings for everything (basically rewritten the package with types)
4. Using the new function components with hooks
5. Full easing function compatibility with jQuery easings (this may have been the case already but I checked the jQuery souce and adjusted the animation implementation to match how it works more closely, hopefully improving compatibility in the process)

The complete set of changes are here: master...SeinopSys:main

I'd like to ask any remaining active maintainers to chime in and let me know if any of these changes interest you. I would be happy to prepare a separate PR just for those changes which you would like to have so that this package remains useful to all moving forward. It's often not trivial for developers to find where a package continues to live (if it even does) once it appears to be abandoned.

For some reason which I couldn't figure out, this doesn't work for universal isomorphic apps, the server rendering turns out to be different from the clients.

I would have animate always with offset an. Can setup custom animation globally?

From the following setup

import React from 'react';
import { Nav, NavItem } from 'react-bootstrap';
import Scrollchor from 'react-scrollchor';

const HomeNavigation = () => (
  <Nav pullRight>
    <NavItem><Scrollchor to="#how" className="nav-link">How?</Scrollchor></NavItem>
  </Nav>
);

export default HomeNavigation;

I get: Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See HomeNavigation > NavItem > SafeAnchor > a > ... > Scrollchor > a

This doesn't match the behavior of the native anchor links that simply update the URL, but don't do anything else if the anchor is not found on the page.

Hello,

Would it be possible to expose the animateScroll function from the helpers as an es6 export so that we can programatically call the scrolling function without having to click on or use the React component?

Something like this:
import { animateSroll } from 'react-scrollchor'

then we can
() => { animateScroll('#to', '#target', (optional) animation) }

This would be really helpful as it will allow us to scroll to anchors on different pages. We can change our route then directly call the animateScroll function on the new page. I don't see how this is currently possible with just the component.

Thanks!

I'd like to use a different easing function than the default, but can't figure how you actually pass through a new easing function in a way that Scrollchor will accept without an error.

is it better to use requestAnimationFrame instead?
https://github.com/chrisdickinson/raf

It's not always users clicking on links in the same page but sometimes users are coming from other pages and I need to check the hash and if there were a hash scroll them to related anchor something like this:

componentDidMount() {
  if (location.hash) {
    schrollchor.scrollToAnchor(location.hash);
  }
}

I'm trying to use this package, but I'm getting this error message on import

webpack-dev-server.js:1 ./~/react-scrollchor/lib/animatescroll.js Module not found: Error: Cannot resolve module 'fbjs/lib/warning'

im running
node v4.4.5
react: 15.2.0,
react-router: 2.4.1,
webpack: 1.12.9
webpack-dev-server: 1.14.0

Hi

If I use <Scrollchor> link instead of default react-bootstrap <Nav.Link>, collapseOnSelect won't work on mobile devices. Any workaround?

Regards

I'm using Scrollchor with no child anchor and have the offset set to -170. After the animation completes, when the hash URL updates, the page scrolls to 0 offset for the element. Seems like maybe the event doesn't have preventDefault set.

I have case that page should be scrolled conditionally.
I try
clickEvent.preventDefault(); clickEvent.stopPropagation();
but it's animated in any case.

The scrollbar often jumps back and forth before starting the animation.

This is best explained in a short video: react-scrollchor.mp4

If the anchor is on a different page, is there any way to have it trigger the router?

Does this support some sort of scrollspy?

What I mean is that once you scroll over/click to scroll to , is highlighted/bold.

Not sure if you've ran into a similar problem before, but what I'm trying to do is search by location and by doing so the map will display 5 markers of breweries close by. However when I added around the submit button it auto scrolls but the markers don't show up anymore. Any reason for loss of functionality you could explain to me? Please and thank you!