Tonic getElementById()

Question

I'm trying to setup a code example on tonicdev.com for my open source react component hosted on Npm.

Here's the code I'm trying to run (live edit on tonicdev.com here):

var React = require('react');
var ReactDOM = require('react-dom');
var {Calendar, CalendarControls} = require('react-yearly-calendar');

function onDatePicked(date) {
  alert(date);
}

ReactDOM.render(
  <Calendar
    year={2016}
    onPickDate={onDatePicked}
  />,
  document.getElementById('calendar')
);

Tonic complains because it doesn't have a document selector:

No document object in node. Tonic is a node environment, so document and other browser features won't exist.

But it does not provide an alternative. Since this is a React component I should render it with ReactDOM.render, which requires as second argument a domContainerNode. How can I obtain one in Tonic?

More generally: am I doing something wrong? Is there any way to run React examples in Tonic?

You can use renderToString to do this in Tonic btw. https://tonicdev.com/tolmasky/56ec2fcc5029631100e6518c — Francisco Ryan Tolmasky I, Mar 18 '16 at 16:42
@FranciscoRyanTolmaskyI That's cool! I guess that's read only, isn't it? I mean, I can't have any onClick handler in React, right? — GavinoGrifoni, Mar 18 '16 at 16:47

score 0 · Accepted Answer · answered Mar 07 '16 at 11:58

0

Gavino, you got it all wrong. Tonic is a node prototyping service which means it allows you run / test code for nodeJS.

As you may already know, nodeJS is a backend service which means it is server-side. Therefore, a document or any other browser-specific ( client-side features ) are not available.

Use nodeJS to get data out of your server towards the /public folder as that is the place in which you want to use the following:

function onDatePicked(date) {
  alert(date);
}

ReactDOM.render(
  <Calendar
    year={2016}
    onPickDate={onDatePicked}
  />,
  document.getElementById('calendar')
);

answered Mar 07 '16 at 11:58

Eduard

3,395
8
37
62

You're right! I thought Tonic was like jsbin or similar in an npm-ish environment, so I planned to use it to allow people to preview the component without downloading it.. Thanks for your answer! – GavinoGrifoni Mar 07 '16 at 12:53
@GavinoGrifoni if the answer is correct, you can accept my answer so the question gets marked as solved. – Eduard Mar 07 '16 at 14:20

Tonic getElementById()

1 Answers1