Update constant name and remove future tag on non-future test

Author: jamesrweb

README.md

@@ -369,24 +369,24 @@ export function App() {
 ### Children
 
 To render a component on top of the sketch, you can add it as a child of the
-`ReactP5Wrapper` component and then use the exported `wrapperClassName` constant
-in your to style one element above the other via css.
+`ReactP5Wrapper` component and then use the exported `P5WrapperClassName`
+constant in your to style one element above the other via css.
 
 For instance using [styled components](https://styled-components.com), for
 example, we could center some text on top of our sketch like so:
 
 ```jsx
-import { ReactP5Wrapper, wrapperClassName } from "../src/index.tsx";
+import { ReactP5Wrapper, P5WrapperClassName } from "../src/index.tsx";
 import styled, { createGlobalStyle } from "styled-components";
 
 const GlobalWrapperStyles = createGlobalStyle`
-  .${wrapperClassName} {
+  .${P5WrapperClassName} {
     position: relative;
   }
 `;
 
 const StyledCentredText = styled.span`
-  .${wrapperClassName} & {
+  .${P5WrapperClassName} & {
     position: absolute;
     top: 50%;
     left: 50%;

package-lock.json

@@ -80,15 +80,15 @@
     "@testing-library/react": "^12.1.5",
     "@types/deep-equal": "^1.0.1",
     "@types/jest": "^27.5.2",
-    "@types/react": "^17.0.46",
+    "@types/react": "^17.0.47",
     "@types/react-dom": "^17.0.17",
     "@typescript-eslint/eslint-plugin": "^5.28.0",
     "@typescript-eslint/parser": "^5.28.0",
     "babel-loader": "^8.2.5",
     "babel-plugin-styled-components": "^2.0.7",
     "canvas": "^2.9.1",
     "css-loader": "^6.7.1",
-    "eslint": "^8.17.0",
+    "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.30.0",
@@ -107,12 +107,9 @@
     "style-loader": "^3.3.1",
     "ts-jest": "^27.1.5",
     "ts-loader": "^9.3.0",
-    "typescript": "^4.7.3",
+    "typescript": "^4.7.4",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.9.2"
-  },
-  "resolutions": {
-    "styled-components": "^5"
   }
 }

package.json

@@ -22,7 +22,7 @@ export type P5CanvasInstance<Props extends SketchProps = SketchProps> = p5 & {
 export type P5Instance<Props extends SketchProps = SketchProps> =
   P5CanvasInstance<Props>;
 
-export const wrapperClassName = "react-p5-wrapper";
+export const P5WrapperClassName = "react-p5-wrapper";
 export const ReactP5Wrapper = memo(ReactP5WrapperComponent, propsAreEqual);
 
 function createCanvasInstance<Props extends SketchProps = SketchProps>(
@@ -95,7 +95,7 @@ function ReactP5WrapperComponent<Props extends SketchProps = SketchProps>({
   useIsomorphicEffect(() => () => removeCanvasInstance(canvasInstanceRef), []);
 
   return (
-    <div ref={wrapperRef} className={wrapperClassName}>
+    <div ref={wrapperRef} className={P5WrapperClassName}>
       {children}
     </div>
   );

src/index.tsx

@@ -1,15 +1,15 @@
 import React, { createFactory } from "react";
 
-import { ReactP5Wrapper, wrapperClassName } from "../src";
+import { ReactP5Wrapper, P5WrapperClassName } from "../src";
 
 describe("Exports", () => {
   it("should export the css class name used on the wrapper", () => {
-    expect(wrapperClassName).not.toBeUndefined();
+    expect(P5WrapperClassName).not.toBeUndefined();
   });
 
   it("should export the css class name used on the wrapper as a non-empty string", () => {
-    expect(typeof wrapperClassName).toBe("string");
-    expect(wrapperClassName.length).toBeGreaterThan(0);
+    expect(typeof P5WrapperClassName).toBe("string");
+    expect(P5WrapperClassName.length).toBeGreaterThan(0);
   });
 
   it("should export the wrapper component", () => {

tests/exports.test.tsx

@@ -90,7 +90,7 @@ describe("Rendering", () => {
     expect(content).toBe('<div class="react-p5-wrapper"></div>');
   });
 
-  it("[General] [Future] should throw an error when the `sketch` prop is not provided", () => {
+  it("[General] should throw an error when the `sketch` prop is not provided", () => {
     expect(() => render(<ReactP5Wrapper />)).toThrow(/sketch/);
   });