Attach arbitrary dom elements about preact HOT 9 CLOSED

@developit thanks for this! that is very helpful, will try this in a sec

from preact.

well @developit you're the most responsive and helpful maintainer I came across 👍 and I mean it!

Just did what you suggested and it works perfectly!

Will throw in a componentDidUnmount to cleanup after as well

Thanks alot

from preact.

@kruczy The best way to do this is to append the element to this.base, but you will need to disable component rendering in order to keep that element from being reclaimed (see example below).

You can see this technique in action in preact-token-input - it uses a component as a foothold in the DOM, but then disables updates and lets tags-input take over from there. A more complex example would be preact-richtextarea, which uses this technique to avoid re-rendering an editable <iframe>.

class DatePicker extends Component {
  shouldComponentUpdate() {
    // do not re-render via diff:
    return false;
  }

  componentWillReceiveProps(nextProps) {
    // you can do something with incoming props here if you need
  }

  componentDidMount() {
    // here's where you can inject the external date picker element:
    let datePicker = document.createElement('input');
    datePicker.type = 'date';
    this.base.appendChild(datePicker);
  }

  render() {
    return <div class="date-picker" />;
  }
}

from preact.

@kruczy You're quick! I just threw together a demo of this on Webpackbin:
http://www.webpackbin.com/V1hyNQbpe

I wanted to make sure I wasn't crazy (haha) - the demo shows that even when re-rendering from a parent component (<Example>), the <DatePicker>'s DOM is preserved.

Cheers! :)

from preact.

Awesome, and thank you!

from preact.

I added this to the Wiki as documentation for others who might have the same question:
https://github.com/developit/preact/wiki/External-DOM-Mutations

from preact.

Turns out there is a problem with componentDidMount in a reuse scenario

Made a quick example based on yours with a toggle button and cleanup like in my use case

componentDidMount is called every second time the component is mounted and it should be called every time

see: http://www.webpackbin.com/E1j567bal

from preact.

Eek! That looks like a caching bug then. Should we open a new issue or use this one?

from preact.

sure, will do that in a sec

from preact.