🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Sign inDemoInstall
Socket

react-three-gui

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-three-gui

A graphical user interface for changing variable states in React.

0.4.2
latest
npm
Version published
Weekly downloads
46
-45.88%
Maintainers
1
Weekly downloads
 
Created
Source

react-three-gui

A graphical user interface for changing variable states in React.

Examples

https://codesandbox.io/s/react-three-fiber-gui-62pvp

Example

Usage

Basic example

import { Controls, useControl } from 'react-three-gui';

export const App = () => {
  const rotationX = useControl('Rotation X', { type: 'number' });
  return (
    <Controls.Provider>
      <Controls.Canvas>
        <mesh rotation-x={rotationX} />
      </Controls.Canvas>
      <Controls />
    </Controls.Provider>
  );
};

Use the spring option to return a react-spring value:

useControl('My ctrl', {
  type: 'number',
  spring: true,
});

// or pass a react-spring configuration value

useControl('My ctrl', {
  type: 'number',
  spring: { mass: 5, tension: 280, friction: 50 },
});

Also possible to pass in your own state:

const [value, set] = useState(0);

useControl('Adjust value', {
  type: 'number',
  state: [value, set],
});

Also you can pass your own control component:

const MyControl = ({ value, setValue }) => (
  <input
    type="number"
    onChange={e => setValue(e.currentTarget.value)}
    value={value}
  />
);

useControl('Test', {
  type: 'custom',
  value: 2,
  component: MyControl,
});

Use your own Canvas

import { Canvas } from 'react-three-fiber';
import { withControls } from 'react-three-gui';

// Wrap the <Canvas> with `withControls`
const YourCanvas = withControls(Canvas);

const Scene = () => (
  <YourCanvas>
    <mesh rotation-x={rotationX} />
  </YourCanvas>
);

const App = () => {
  const rotationX = useControl('Rotation X', { type: 'number' });
  return (
    <Controls.Provider>
      <Scene />
      <Controls />
    </Controls.Provider>
  );
};

API

import { useControl, Controls } from 'react-three-gui';

// All the possible options
useControl(name: string, {
  // General
  type: 'number' | 'xypad' | 'boolean' | 'button' | 'color' | 'select' | 'string' | 'file' | 'custom';
  value: any; // Initial value
  spring: boolean | SpringConfig; // Use spring
  group: string; // Group name
  state: [any, Dispatch<SetStateAction<any>>]; // Use your own state
  onChange(value: any): void; // onChange callback

  // number | xypad
  min: number; // Minimum value (default: 0)
  max: number; // Maximum value (default: 1)
  distance: number; // The end-to-end slider distance (default: 1)
  scrub: boolean; // When slider is released it will reset to the center but keep its value

  // select
  items: string[];

  // button
  onClick(): void;

  // file
  loader?: THREE.TextureLoader | THREE.FileLoader | etc;

  // custom
  component?: React.Component;
});

// Controls component
<Controls
  title="react-three-gui"
  collapsed={true}
  defaultClosedGroups={['Other', 'Stuff']}
  width={300} // default 300
  anchor={'top_left' | 'bottom_left' | 'top_right' | 'bottom_right'} // see ControlsAnchor enum
  style={{ ... }} // pass any kind of styles here. Supports @react-spring/web styles.
/>

Supported controls

  • number
    • Returns number
  • xypad
    • Returns { x: number, y: number } object
  • boolean
    • Returns boolean
  • button
    • Returns void
  • color
    • Returns string (as hex: #ffffff)
  • select
    • Returns string
  • file
    • Returns new THREE.FileLoader
  • string
    • Returns string

Future plans

  • Support custom control components
  • File upload loader control
  • Groups
  • Draggable Widget
  • Collapsable widget
  • Persist state localstorage
  • Multi platform?

FAQs

Package last updated on 20 Nov 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts