Is there a way to implement fullscreen API in the React component functions?
You can refer #chiragrupani/fullscreen-react package. It supports both class components and hooks/function components. Also, it supports allowing multiple elements to enter full screen. It's usage is simple as:
Install: npm i #chiragrupani/fullscreen-react
Add button/icon which triggers full screen. You can also make it to toggle between entering and exiting full screen.
<button onClick={e => this.setState({isFullScreen: true})}>Go Fullscreen</button>
Wrap the element that you want to enter fullscreen with FullScreen Component provided by npm package as shown below:
<FullScreen
isFullScreen={this.state.isFullScreen}
onChange={(isFullScreen) => {
this.setState({ isFullScreen });
}}
>
<div>Fullscreen</div>
</FullScreen>
For hooks, the code is similar:
export default function FSExampleHook() {
let [isFullScreen, setFullScreen] = React.useState(false);
return (
<>
<button onClick={(e) => setFullScreen(true)}>Go Fullscreen</button>
<FullScreen
isFullScreen={isFullScreen}
onChange={(isFull: boolean) => {
setFullScreen(isFull);
}}
>
<div>Fullscreen</div>
</FullScreen>
</>
);
}
PS: I am not author of this library, but I am using it in my production site.
I can recommend you this package react-full-screen
Related
What I'm trying to do:
I was using the appWindow from Tauri to access the appWindow.minimize(), appWindow.toggleMaximize(), and appWindow.close() to create a custom title bar.
What the code looks like:
import { appWindow } from "#tauri-apps/api/window";
const CustomTitleBar = () => {
const hasLoaded = hasLoadedCSR(); // custom hook for checking if component has mounted using useEffect
if (typeof window === "undefined") return <></>; // 1st attempt to disable SSR for this component
if (!hasLoaded) return <></>; // 2nd attempt to disable SSR for this component
return (
<>
<div data-tauri-drag-region className="titlebar">
<button
className="titlebar-button"
id="titlebar-minimize"
onClick={() => {
console.log("Clicked");
appWindow.minimize();
}}
>
<img
src="https://api.iconify.design/mdi:window-minimize.svg"
alt="minimize"
/>
</button>
<button
className="titlebar-button"
id="titlebar-maximize"
onClick={() => appWindow.toggleMaximize()}
>
<img
src="https://api.iconify.design/mdi:window-maximize.svg"
alt="maximize"
/>
</button>
<button className="titlebar-button" id="titlebar-close">
<img
src="https://api.iconify.design/mdi:close.svg"
alt="close"
onClick={() => appWindow.close()}
/>
</button>
</div>
</>
);
};
export default CustomTitleBar;
I basically did 2 attempts to solve the problem because I definitely think this is caused by SSR as mentioned by FabianLars in a similar question.
To fix the problem, I basically created another component using the dynamic function to force CSR for CustomTitleBar.
import dynamic from "next/dynamic";
const DynamicCustomTitleBar = dynamic(() => import("./CustomTitleBar"), {
ssr: false,
});
export default DynamicCustomTitleBar;
How I got around this issue is as follows.
If and when I use any of the #tauri-apps/api exports I wrap them in a component that I then import using the dynamic import flow without ssr. This is mainly to keep my project organized because I just create sort of a wrapper for every function that I might want to use from tauri-apps/api.
So I would make the following folder structure:
const TauriApiWrapComponent = dynamic(() => import("./TauriApiWrapComponent"), {
ssr: false,
});
I want customize the input file button so I decided to use useRef, but in this situation I cant read file properties. How can I do this?
const inputFile = useRef(null);
const onButtonClick = () => {
inputFile.current.click();
};
return (
<>
<ToggleButtonGroup size="small" className={classes.marginEnd}>
<input
style={{ display: "none" }}
// accept=".xls,.xlsx"
ref={inputFile}
onChange={(e) => handleInput(e)}
type="file"
// onClick={handleInput}
/>
<Tooltip title="upload">
<ToggleButton size={"small"}>
<CloudUpload onClick={onButtonClick}></CloudUpload>
</ToggleButton>
</Tooltip>
</ToggleButtonGroup>
</>
);
I tried to create a codepen to test the same, it worked well for me. Can you try commenting out the onChange handler if it works for you? Rest of my code is quite similar to yours. The other issue might be that the onButtonClick function is not triggered, if you can put a console log or a debugger to test it out once.
Link to Codepen - Click on File Upload button, the popup comes up.
Also, some notes from React JS Documentation about the same - React docs for File Upload Input
I'm really stuck on a problem with a React web app I'm building. I'm using the array.map() method to dynamically create dropdowns, and I'm finding that everything works beautifully on desktop browsers (including in the mobile view of Chrome dev tools), but not on actual mobile browsers. I would really appreciate your thoughts!
Expected Behavior
I expect the dropdowns to populate, usually from an array of objects. Then, when the user clicks on one of the items in the dropdown menu, it will either trigger (1) a function or (2) a link to another part of the React App. Note that I'm using react-router-dom to handle routing.
Observed Behavior on Mobile Browsers
The dropdowns populate correctly, but they malfunction when I select from among the options (see Figure 1).
This behavior is observable when the dropdown selection triggers both a (react-router-dom Component) and calls a function. In the limited cases when the function is called correctly, the correct parameters are passed and the function does execute correctly.
Code Snippits
This is an example of the code I'm using to generate the list of links. It is a simple React functional component that serves as the header to all settings pages in my app, and the Component is part of a React MaterializeCSS library, which seems to be working fine.:
const SettingsHeader = () => {
let { url } = useRouteMatch();
const { userAccess, styleItem, headerStyle, updateHeader, theme } = useContext(SettingsContext);
const options = userAccess.length ? (
userAccess.sort().map(permission => {
// Returns an object with details needed to build the component via a Settings Context function.
let details = styleItem(permission);
return (
<Link
key={permission}
to={`${url}${details.link}`}
onClick={() => updateHeader(permission)}
>
<Icon className={theme.text}>{details.icon}</Icon>
<span className={theme.text}> {details.text}</span>
</Link>
);
})
) : (
<h4 className="grey-text">
<Icon>warning</Icon> You don't have permission to edit any settings.
</h4>
);
return (
<h4 className={theme.text}>
<i className="material-icons">{headerStyle.icon}</i> {headerStyle.text}
<Dropdown
options={{ ... }}
trigger={
<Button className={"right " + theme.themeColor} node="button">
Views
</Button>
}
>
{options}
<a href="#!">
<Icon className="grey-text">close</Icon>
<span className="grey-text"> Close</span>
</a>
</Dropdown>
</h4>
);
}
This is an example of the code I'm using to generate a list of theme options, each of which calls a function in a React Context Component I'm using in many places in the App:
const ThemeSettings = () => {
// Brings in Theme update function from SettingsContext
const { changeTheme, theme } = useContext(SettingsContext);
// Array of possible themes.
const themesList = ['Burnt Orange', 'Chrome', 'Deep Purple', 'Earth', 'Fresh Green', 'Green', 'Maroon', 'Navy', 'Pink', 'Red', 'Royal Blue', 'Teal']
const themeOptions = themesList.map(theme => {
let themeObject = getTheme(theme);
return (
<a href="#!" key={theme} onClick={(e) => changeTheme(e, theme) }>
<Icon className={themeObject.text}>style</Icon>
<span className={themeObject.text}> {theme}</span>
</a>
)
});
return (
<Dropdown
options={{ ... }}
trigger={
<Button className={"left " + theme.themeColor} node="button">
Themes
</Button>
}
>
{ themeOptions }
<a href="#!">
<Icon className="grey-text">close</Icon>
<span className="grey-text"> Close</span>
</a>
</Dropdown>
);
}
Thanks very much for giving this a look!
This is a known MaterializeCSS bug for devices running iOS-13.
I was only able to find one workaround available at time of writing, mentioned by Falk in this issue thread:
To fix it, I had to check out the #v1-dev branch of
https://github.com/Dogfalo/materialize, build it with grunt release
and use the materialize.js in /dist folder for my project.
So basically i have a parent component which uses a child button component. Basically currently when the input validation is not correct it will keep the button disabled. However now I have tried to disable the button on click. The button is currently a pure component and i started to use hooks but not sure how i can still get the validation running.
Code is below
<ChildButton
onClick={() => {
this.checkSomething= this.checkCreds();
}}
enabled={this.validateInput()}
/>
My pure component currently looks like this:
export function AButton({ onClick, enabled, text }) {
const [disabled, setDisabled] = useState(!enabled);
function handleClick() {
setDisabled(!disabled);
//onClick();
}
return (
<Button
style={{ display: "block", margin: "auto" }}
id="next-button"
onClick={handleClick}
disabled={disabled}
>
{text}
</Button>
);
}
So i can get the disable button to work in both scenairos. As the enabled is always being passed down into this pure component so need to keep setting state of it.
I ended up using useEffect from react hooks
useEffect(() => setDisabled(!enabled), [enabled]);
This will check every time the enabled props is updated from the parent. Similar to how componentDidUpdate would work
is it possible to use react-custom-scrollbars with react-autosuggest together?
I wrote this in for auto-suggest but it doesn't work correctly:
renderSuggestionsContainer({ containerProps, children, query }) {
const callRef = scrollbars => {
if (scrollbars !== null) {
ref(scrollbars);
}
}
return (
<Scrollbars
autoHeight
autoHeightMax={240}
id={this.props.id}
ref={callRef}
renderTrackVertical={() => <div className="scrollbars-wrapper" />}
renderThumbVertical={() => <div className="scrollbar-handler" />}>
{children}
</Scrollbars>
);
}
How?
if want to implement react js auto-suggestion box, then you can simply use "react-select", have all feather like scrolling, loader etc.
you will find more detail here https://github.com/JedWatson/react-select
if you want to implement your own with react-native
then instead of scrollbar you should use ListView, because it having more feather-like,
Auto-caching image for ios and android,
Method for onReachBottom which helps to implement infinite scroll. etc