support for styled-components

[thillin]

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]

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]

@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.