View - react-juce

Search…
View
The most fundamental of the core React-JUCE components, View is a container that supports layout with flexbox, style, and some event handling. View maps directly to the underlying native reactjuce::View instance, which is effectively a simple juce::Component.
View is designed to be nested inside other views and can have 0 to many children of any type.
Example
1
import React, { Component } from "react";
2
import { View } from "react-juce";
3
​
4
function App(props) {
5
  return (
6
    <View {...styles.outer} onMouseDown={(e) => console.log("Mouse event!", e)}>
7
      <View {...styles.inner} />
8
    </View>
9
  );
10
}
11
​
12
const styles = {
13
  outer: {
14
    width: "100%",
15
    height: "100%",
16
    backgroundColor: "ff17191f",
17
    justifyContent: "center",
18
    alignItems: "center",
19
  },
20
  inner: {
21
    width: "25%",
22
    height: "25%",
23
    backgroundColor: "ffa7191f",
24
  },
25
};
Copied!
Props
onMeasure
A callback which will be invoked any time the View's layout calculation changes. The callback should accept a single argument, a SyntheticEvent object holding a width and height property reflecting the new size of the View.
Type
Required
Supported
function
No
Yes: Non-Standard
onMouseDown
A callback which will be invoked in response to a mouse button down event on the underlying native component. The callback should accept a single argument, a SyntheticMouseEvent object similar in interface to MouseEvent.
Type
Required
Supported
function
No
Partial: Standard
onMouseUp
A callback which will be invoked in response to a mouse button up event on the underlying native component. The callback should accept a single argument, a SyntheticMouseEvent object similar in interface to MouseEvent.
Type
Required
Supported
function
No
Partial: Standard
onMouseEnter
A callback which will be invoked in response to a mouse entering the local bounds of a native component. The callback should accept a single argument, a SyntheticMouseEvent object similar in interface to MouseEvent.
Type
Required
Supported
function
No
Partial: Standard
onMouseLeave
A callback which will be invoked in response to a mouse leaving the local bounds of a native component. The callback should accept a single argument, a SyntheticMouseEvent object similar in interface to MouseEvent.
Type
Required
Supported
function
No
Partial: Standard
onMouseDoubleClick
A callback which will be invoked in response to a mouse button double click on the underlying native component. The callback should accept a single argument, a SyntheticMouseEvent object similar in interface to MouseEvent.
Type
Required
Supported
function
No
Partial: Standard
onKeyPress
A callback which will be invoked in response to a key press event while the underlying native component has focus. The callback should accept a single argument, a SyntheticKeyboardEvent object similar in interface to KeyboardEvent.
Type
Required
Supported
function
No
Partial: Standard
Styles
View supports all of the default style properties described in Style Properties.
Guides - Previous
Why Not React Native?
Next - Components
Image
Last modified 8mo ago
Copy link
Contents