Stable React release

[Sebastian Dobrincu]

Amazing job with the 1.0.0 release! Everything works great locally but the NPM package doesn't export the classes properly when used in Next.js

Is there an ETA on a patch for this? Thanks!

Type error: Module '"shadergradient"' has no exported member 'GradientCanvas'.

> | import { GradientCanvas, Gradient } from 'shadergradient'

[undefined]

👍 Same error on my end. Would love to use the package!

[undefined]

@sebyddd For now I am using the following solution

1. Create types/shadergradient/index.d.ts in the root directory of the project

import { CanvasProps } from "@react-three/fiber";

declare module "shadergradient" {
  export type MeshT = {
    type?: "plane" | "sphere" | "waterPlane";
    animate?: "on" | "off";
    range?: "enabled" | "disabled";
    rangeStart?: number;
    rangeEnd?: number;
    uTime?: number;
    uSpeed?: number;
    uStrength?: number;
    uDensity?: number;
    uFrequency?: number;
    uAmplitude?: number;
    positionX?: number;
    positionY?: number;
    positionZ?: number;
    rotationX?: number;
    rotationY?: number;
    rotationZ?: number;
    color1?: string;
    color2?: string;
    color3?: string;
    reflection?: number;
    wireframe?: boolean;
    shader?: string;
    rotSpringOption?: any;
    posSpringOption?: any;
    urlString?: string;
  };

  export type GradientT = MeshT & {
    control?: "query" | "props";
    isFigmaPlugin?: boolean;
    dampingFactor?: number;
    frameRate?: number;

    // View (camera) props
    cAzimuthAngle?: number;
    cPolarAngle?: number;
    cDistance?: number;
    cameraZoom?: number;

    // Effect props
    lightType?: "3d" | "env";
    brightness?: number;
    envPreset?: "city" | "dawn" | "lobby";
    grain?: "on" | "off";

    // Tool props
    zoomOut?: boolean;
    toggleAxis?: boolean;
    hoverState?: string;
  };

  export function Gradient(props: GradientT): JSX.Element;
  export function GradientCanvas(props: CanvasProps): JSX.Element;
}

2. Add typeRoots in your tsconfig.json

{
  "compilerOptions": {
    // ... rest of your config
    "typeRoots": ["./node_modules/@types", "./types"]
   }
}

And you should be good to go for now!

[ruucm]

Heyyy sorry to late reply!

I was dumb and haven't enabled my Github app notifications.

I'm making fixes and it will arrive soon!

[ruucm]

Arrived! (v1.2.2)

npm:shadergradient

CRA Example

Next.js Example

Behind of this, we've decided to detach store codes and changed main component names to "ShaderGradient" from "Gradient". (but was not applied to examples)

Thanks for reporting this! 🙏🏻🙏🏻