Set HTML Tag of Element

[IsenrichO]

It'd be nice if there were a way to specify the HTML tag that Element uses as a wrapper around its children. For example,

import React from 'react';
import { Element } from 'react-scroll';

const myComponent = ({ children, ...rest }) => (
  <Element
    name="myComponent"
    elementType="section"
  >
    <h2>I'm an example component</h2>
  </Element>
);

In this example, the elementType prop specifies that the h2 element gets wrapped within a containing <section> tag.

[fisshy]

var React   = require('react');
var Scroll  = require('react-scroll');
var Helpers = Scroll.Helpers;

var Element = React.createClass({
  render: function () {
    return (
      <div {...this.props}>
        {this.props.children}
      </div>
    );
  }
});

module.exports = Helpers.Element(Element);

Can't you use somthing like this to wrap you elements?

[jzillmann]

@fisshy I'm trying it like this, but i'm getting

Warning: Unknown prop `parentBindings` on <section> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in section (created by TocElement)
    in TocElement (created by _)

My component looks as this:

var React = require('react');

var Scroll = require('react-scroll');

//An element in the main content of a page linked by a TocLink within a TocSideBar
class TocElement extends React.Component {

    static propTypes = {
        name: React.PropTypes.string.isRequired,
        children: React.PropTypes.object.isRequired,
    };

    render() {
        return (
            <section {...this.props}>
              { this.props.children }
            </section>
        );
    }
}

const EnhancedTocElement = Scroll.Helpers.Element(TocElement);
export { EnhancedTocElement as default }

Any idea ?

[jgrancher]

FWIW, i'm getting the same error. Using next.js, my component looks like this:

import React from 'react';
import { Helpers } from 'react-scroll';

class Section extends React.Component {
  render() {
    const { children, ...props } = this.props;
    return <section {...props}>{children}</section>;
  }
}

export default Helpers.Element(Section);

[fisshy]

@jgrancher props has "tag" right? Let me look into it.

[jgrancher]

@fisshy In this case, this.props has: children, name, and parentBindings object.

[constantx]

Also getting this when creating a custom Link component:

Warning: Unknown props `align`, `spy`, `hashSpy`, `smooth`, `delay`, `duration`, `activeClass` on <li> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop

<li
      {...props}
      className={classes}
      spy={spy}
      hashSpy={hashSpy}
      smooth={smooth}
      delay={delay}
      duration={duration}
      activeClass={cx('floatingMenuItem-active')}
    >
      <a>
        {props.children}
      </a>
    </li>

[chawes13]

The source for Element uses parentBindings to set a ref. https://github.com/fisshy/react-scroll/blob/50da050bc6bb02859f7afd0f754d664b109eff48/modules/components/Element.js#L10-L19

So a custom Element should look something like:

import React from 'react';
import { Helpers } from 'react-scroll';

function ScrollableSection ({ children, parentBindings, ...rest }) {
  return (
    <section {...rest} ref={(el) => { parentBindings.domNode = el }}>{children}</section>
  )
}
export default Helpers.Element(ScrollableSection);

Maybe the best "fix" for this issue is to update the README?

[fisshy]

Yes, you are right @chawes13, the readme should probably be updated.

[chawes13]

Yes, you are right @chawes13, the readme should probably be updated.

I'm happy to submit a PR if you'd like!