how to use it with Reactjs

[shirish47]

I have followed instructions as you said, I am novice currently learning react js but I know processing and p5.
I have implement a visualizer in web app

so here is my minimal code.

import React, { Component } from 'react';
import {DropdownButton, MenuItem, Button, Container, Row, Col} from 'react-bootstrap';
import { Line } from "react-chartjs";
import logo from './logo.svg';
import './App.css';
import P5Wrapper from 'react-p5-wrapper';
class App extends Component {
  render() {
    var time="Evening";
    var userName="Shirish";
    return (
      <div className="App">
        <P5Wrapper sketch={sketch} />
      </div>
    );
  }
}
export default function sketch (p) {
  let rotation = 0;

  p.setup = function () {
    p.createCanvas(600, 400, p.WEBGL);
  };

  p.myCustomRedrawAccordingToNewPropsHandler = function (props) {
    if (props.rotation){
      rotation = props.rotation * Math.PI / 180;
    }
  };

  p.draw = function () {
    p.background(100);
    p.noStroke();
    p.push();
    p.rotateY(rotation);
    p.box(100);
    p.pop();
  };
};


export default App;

I get

./src/App.js
Syntax error: Only one default export allowed per module. (182:0)

I think I am not sure of this function. where should it reside ? in main app file? I also think this is no in same langauge also.

[and-who]

Hi Shirish,

the Error Message means exactly what it says, you have two default exports, but only one is allowed.
Remove the default export from you sketch(p) function.

Here you find a Example of how to structure it:
https://github.com/NeroCor/react-p5-wrapper/tree/master/example/src

I'm closing this Issue because this is a general Javascript Question and has nothing to do with this Module.