cabbage-react 1.0.0-beta.27 → 1.0.0-beta.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +101 -100
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,100 +1,101 @@
1
- # Cabbage-React
2
-
3
- Cabbage-React provides React hooks for synchronizing [Cabbage](https://cabbageaudio.com) with [React](https://github.com/facebook/react), making it easier to build UI components that communicate with the Cabbage host.
4
-
5
- ## Example Project
6
-
7
- An example of implementation is available [here](https://github.com/hdale94/cabbage-react-example).
8
-
9
- ## Installation
10
-
11
- yarn add cabbage-react
12
- # or
13
- npm install cabbage-react
14
-
15
- ## Hooks
16
-
17
- ### useCabbageState
18
-
19
- Synchronize a parameter with Cabbage. This hook:
20
-
21
- - Listens for value updates from Cabbage.
22
- - Sends local changes (e.g., via sliders, knobs) back to Cabbage.
23
-
24
- ### useCabbageProperties
25
-
26
- Get properties for a parameter from Cabbage.
27
- This hook:
28
-
29
- - Listens for property updates from Cabbage.
30
- - Updates local state automatically when data changes.
31
-
32
- ## Usage
33
-
34
- ```
35
- import { InputHTMLAttributes } from "react";
36
- import { useCabbageProperties, useCabbageState } from "cabbage-react";
37
-
38
- const HorizontalSlider = ({
39
- channel,
40
- paramIdx,
41
- inputProps,
42
- }: {
43
- channel: string;
44
- paramIdx: number;
45
- inputProps?: InputHTMLAttributes<HTMLInputElement>;
46
- }) => {
47
- const { properties } = useCabbageProperties(channel);
48
- const { value, setValue } = useCabbageState<number>(channel, paramIdx);
49
-
50
- return (
51
- <div>
52
- <input
53
- type="range"
54
- min={properties?.range?.min ?? 0}
55
- max={properties?.range?.max ?? 1}
56
- step={properties?.range?.increment ?? 0.01}
57
- value={value}
58
- onChange={(e) => setValue(e.target.valueAsNumber)}
59
- {...inputProps}
60
- style={{
61
- accentColor: "rgb(147,210,0)",
62
- ...inputProps?.style,
63
- }}
64
- />
65
-
66
- {/* Displaying the value */}
67
- <p style={{ margin: 0 }}>{value ?? 0}</p>
68
- </div>
69
- );
70
- };
71
-
72
- export default HorizontalSlider;
73
- ```
74
-
75
- ## Interact directly with Cabbage
76
-
77
- You can also import the [Cabbage class](https://github.com/hdale94/cabbage-react/blob/main/src/cabbage/cabbage.js) to send custom messages or interact directly with Cabbage.
78
-
79
- ## Notify Cabbage When UI Is Ready
80
-
81
- To let Cabbage know your UI is ready to receive data, send a `cabbageIsReadyToLoad` message when your app initializes.
82
-
83
- Place this call before rendering your app — typically in your main.tsx or index.tsx file:
84
-
85
- ```
86
- import { StrictMode } from "react";
87
- import { createRoot } from "react-dom/client";
88
- import "./index.css";
89
- import App from "./App.tsx";
90
- import { Cabbage } from "cabbage-react";
91
-
92
- // Notify Cabbage that the UI is ready to receive data
93
- Cabbage.sendCustomCommand("cabbageIsReadyToLoad");
94
-
95
- createRoot(document.getElementById("root")!).render(
96
- <StrictMode>
97
- <App />
98
- </StrictMode>
99
- );
100
- ```
1
+ # Cabbage-React
2
+
3
+ Cabbage-React provides React hooks for synchronizing [Cabbage](https://cabbageaudio.com) with [React](https://github.com/facebook/react), making it easier to build UI components that communicate with the Cabbage host.
4
+
5
+ ## Example Project
6
+
7
+ An example of implementation is available [here](https://github.com/hdale94/cabbage-react-example).
8
+
9
+ ## Installation
10
+
11
+ ```jsx
12
+ yarn add cabbage-react
13
+ # or
14
+ npm install cabbage-react
15
+ ```
16
+ ## Hooks
17
+
18
+ ### useCabbageState
19
+
20
+ Synchronize a parameter with Cabbage. This hook:
21
+
22
+ - Listens for value updates from Cabbage.
23
+ - Sends local changes (e.g., via sliders, knobs) back to Cabbage.
24
+
25
+ ### useCabbageProperties
26
+
27
+ Get properties for a parameter from Cabbage.
28
+ This hook:
29
+
30
+ - Listens for property updates from Cabbage.
31
+ - Updates local state automatically when data changes.
32
+
33
+ ## Usage
34
+
35
+ ```jsx
36
+ import { InputHTMLAttributes } from "react";
37
+ import { useCabbageProperties, useCabbageState } from "cabbage-react";
38
+
39
+ const HorizontalSlider = ({
40
+ channel,
41
+ paramIdx,
42
+ inputProps,
43
+ }: {
44
+ channel: string;
45
+ paramIdx: number;
46
+ inputProps?: InputHTMLAttributes<HTMLInputElement>;
47
+ }) => {
48
+ const { properties } = useCabbageProperties(channel);
49
+ const { value, setValue } = useCabbageState<number>(channel, paramIdx);
50
+
51
+ return (
52
+ <div>
53
+ <input
54
+ type="range"
55
+ min={properties?.range?.min ?? 0}
56
+ max={properties?.range?.max ?? 1}
57
+ step={properties?.range?.increment ?? 0.01}
58
+ value={value}
59
+ onChange={(e) => setValue(e.target.valueAsNumber)}
60
+ {...inputProps}
61
+ style={{
62
+ accentColor: "rgb(147,210,0)",
63
+ ...inputProps?.style,
64
+ }}
65
+ />
66
+
67
+ {/* Displaying the value */}
68
+ <p style={{ margin: 0 }}>{value ?? 0}</p>
69
+ </div>
70
+ );
71
+ };
72
+
73
+ export default HorizontalSlider;
74
+ ```
75
+
76
+ ## Interact directly with Cabbage
77
+
78
+ You can also import the [Cabbage class](https://github.com/hdale94/cabbage-react/blob/main/src/cabbage/cabbage.js) to send custom messages or interact directly with Cabbage.
79
+
80
+ ## Notify Cabbage When UI Is Ready
81
+
82
+ To let Cabbage know your UI is ready to receive data, send a `cabbageIsReadyToLoad` message when your app initializes.
83
+
84
+ Place this call before rendering your app — typically in your main.tsx or index.tsx file:
85
+
86
+ ```jsx
87
+ import { StrictMode } from "react";
88
+ import { createRoot } from "react-dom/client";
89
+ import "./index.css";
90
+ import App from "./App.tsx";
91
+ import { Cabbage } from "cabbage-react";
92
+
93
+ // Notify Cabbage that the UI is ready to receive data
94
+ Cabbage.sendCustomCommand("cabbageIsReadyToLoad");
95
+
96
+ createRoot(document.getElementById("root")!).render(
97
+ <StrictMode>
98
+ <App />
99
+ </StrictMode>
100
+ );
101
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cabbage-react",
3
- "version": "1.0.0-beta.27",
3
+ "version": "1.0.0-beta.28",
4
4
  "type": "module",
5
5
  "keywords": [
6
6
  "cabbage",