Add React compatible example to p5() instance method

processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —

http://p5js.org/

GNU Lesser General Public License v2.1

21.61k stars 3.31k forks source link

Add React compatible example to p5() instance method #6213

Open da5idf opened 1 year ago

da5idf commented 1 year ago

Increasing Access

Unsure Although it may not have an immediate impact on increasing access to people listed in the documentation, it will help anyone trying to use p5js in a React application.

Most appropriate sub-area of p5.js?

[ ] Accessibility
[ ] Color
[X] Core/Environment/Rendering
[ ] Data
[ ] DOM
[ ] Events
[ ] Image
[ ] IO
[ ] Math
[ ] Typography
[ ] Utilities
[ ] WebGL
[ ] Build Process
[ ] Unit Testing
[ ] Internalization
[ ] Friendly Errors
[ ] Other (specify if possible)

Feature enhancement details

I want to provide two examples of using the p5() instance method to render sketches in a React project. The first will utilize the existing example in a React project context. The second will be more advanced: I will provide an example of how to expose the parameters of a p5 sketch to the client using a closure.

welcome[bot] commented 1 year ago

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

limzykenneth commented 1 year ago

I'm hesitant to include such a specific example for a few reasons.

First is that React is not something we semantically support (it may work but we don't guarantee it will always work) and p5.js usually work better as a script included in the page instead of being imported into a component (which is what I see many people using React prefer to do).

Second is that if we included examples for React, there should be a case to be made for other frameworks as well. We need a criteria to determine whether to include something or not, and it can be hard to remove an example later so this criteria needs to be strict.

Third, I'm unsure how this increases access and I'm not sure endorsing React only is something we want to do as well.

da5idf commented 1 year ago

Hey there, Thanks very much for your quick response! This all makes a lot of sense. Perhaps a Medium article or something outside the official documentation makes more sense for this type of example. Thanks for your feedback.

Cheers, David