Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

support for styled-components #168

Closed
thillin opened this issue Mar 28, 2017 · 2 comments

Comments

@thillin
Copy link

commented Mar 28, 2017

Hi there, firstly thanks for the work put into this - it's super useful & easy to implement.

I've ran into one recurring issue while using this in a current project however that uses styled-components as I keep running into this error: You must wrap any Component Elements passed to Waypoint in a DOM Element (eg; a <div>).

This occurs for example in the below code where Container is simply a div with styling. I appreciate I could wrap Container in another div for example but this seems like it could get very messy when using multiple waypoints per page. It would be nice if there was support to allow styled-components to be wrapper inside the Waypoint component.

const CaseDetail = styled.div`
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
`
          <Waypoint onEnter={this.slideInText}>
              <Container>
                <H1>{this.props.title}</H1>
                <P>{this.props.copy}</P>
                <Button>View Work</Button>
              </Container>
          </Waypoint>

If there's anything else I can do to help or provide more information etc please let me know!

@jamesplease

This comment has been minimized.

Copy link
Collaborator

commented Mar 28, 2017

Hm, this doesn't really have anything to do with styled-components, so I don't think we need to consider that library in this issue.

The reason for this restriction comes down to Waypoint needing to measure the height of a child. To do this, Waypoint needs to access its children's height. We do this by giving the child a ref.

This creates a few restrictions:

  1. The child must be a single thing, not an array of things, as we need to attach a ref to just that one thing
  2. The child must support refs. Some Components can be functions, which don't support refs, so we enforce wrapping the children in a regular old DOM element

If this doesn't work for you, one idea would be to create a wrapper around Waypoint that then wraps the children in a div. @lencioni wrote up what this might look like here: #152 (comment)

Also, I encourage you to read the comments on that PR for more context around this decision. If you can think of a better solution, we'd love to hear it!


This issue is sort of a dupe of / related to #159

@jamesplease

This comment has been minimized.

Copy link
Collaborator

commented Apr 5, 2017

@thillin , i'm going to close this out, as it seems like a solved issue. If I'm wrong, no worries! Just let me know here and we can reopen the issue and keep the conversation going.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.