How to find if component is in external display in electron? - javascript

I have created a reusable component in react to display a paragraph. I'm using the same component in the external display. Because the external display is bigger in size I want to apply large font on the component that's being mounted in the external display. Is there any way to find if the component is mounted on the external display or not?
To make it more clear, if the component is in external display I can add the condition to make the font larger in react. To do that I need to pass a prop to component that will hold the information if the component is being rendered on external display or not. Is there any way to do so? Or maybe any other solution that can help me achieve this output?
Thank you in advance :)

Related

How to create new page in React Native?

My app displayed a grid of pokemons, I have retrieved the data from axios and fed it to a FlatList in React Native (Below)
I want each of these pokemons to be buttons which leads to the next page (Below)
I have no idea on how to do this. I'm assuming I have to create an 'onPress' function inside the Flatlist? Or React routing but not sure could someone shed some light into this?
Thanks
Basically, you need a lib to do that. I've been using React Navigation. You can follow its tutorial here https://reactnavigation.org/docs/hello-react-navigation

Redux or simple React to handle navigation

I am very new to React and Redux and I am currently trying to wrap my head around how states are shared through the UI.
I have a pretty simple use case.
Picture a container with three columns:
A left Side Menu with four buttons
A central content section
A right container with some other content
When I click one of the four buttons I want three things to happen:
The class on the button is updated so it has borders
The class on the other buttons is updated so if they had been clicked before their border class is removed
The content in one part of the middle section is updated. This content requires data from the backend (Django Rest) to be fetched
Here are my questions:
Should I separate this interaction into a UI only concern and a Data driven one or handle both with a single state?
Because the buttons share a parent component but they do not with the central component, would I be better off using Redux if I do not want to define the state at the very top level of the Container?
Because I am new and Hooks seem to be the way to go I am trying to use hooks rather than classes, does it still make sense to separate components and containers?
You can use react-router-dom library to achieve want you want.
for your left side menu you can create active class in css and then check for current route with location.pathname property of react-router-dom and if it is for that button, active class set for it.
and for your main section you can fetch data in useEffect hook.
I think it is good to separate data and UI but for buttons what I say is good.
and you can store data in redux for your main section.

Load Toolbar of AppBar dynamically based on current page - React Admin

I am relatively new to the React world and struggling to find a way to load IconButtons to the toolBar of an AppBar (from Material UI).
Say I am on pageA and like to have two IconButtons specific to pageA and when I got to pageB, I like to have the toolBar buttons loaded that are specific to pageB.
I have created a codesandbox project to make it easier for anyone to help.
https://codesandbox.io/s/material-ui--react-admin-1qc5x
I appreciate any help, guidance etc.
you can achieve this by multiple ways:
Redux: you can use react-redux and create a store where you can store your current_page value (best practice in case of SPA) and access the page value in
static getDerivedStateFromProps(props, state){
//your code here
}
Based on Route(react-router)
[what i have done] based on URL params as you are doing history.push so it will be easier to extract the params from your URL and based on that render your Toolbar Icons.
My code reference: https://codesandbox.io/s/material-ui--react-admin-nxh7m

Using vue js without components

I went through laracasts vuejs tutorials few times, thenetninja on youtube and few others..
So I decided to change my website front into vue because of reactivity.
Like for toggles and other stuff. But there are also components which are very useful and cool but in my case it seems like they are mostly unneeded.
Every tutorial is about basic things but in my case where I have:
<component-a>
<component-b></component-b>
</component-a>
<component-c></component-c>
And inside <component-b> I click on button and with that I need to change something in <component-c>.
I don't know how to do this besides adding everything inside one component which is not the case because some things are not supposed to be rendered if user is not logged in:
<component-c>
#if(auth()->user())
<component-d></component-d>
#endif
<component-e></component-e>
</component-c>
And I can't use php inside .vue :D
So I leave everything as it is and make reactivity based on that without using components.
Is that bad?
If it is, how to alter component-d on some click inside component-b with using components?
(In my case, B is dropdown menu from topbar and D is tab section that changes on that dropdown menu item clicks)
If certain content must be hidden from the client you can't use vue and just keep using php and laravel blade's #if, but then "reactivity" can only take place on a full page load.
If the content must only be hidden visually, of can be retrieved via an API then you can use Vue directives like v-if, v-show and use javascript to show and hide components.

Navigation in a single page app with react.js

I'm building a single page application with React and Backbone and am trying to figure out best practices for handling navigation between content in the app. My app will have a sidebar with links, for example, to "photos" and "settings". The sidebar is always present, so upon clicking "settings" I want the settings component to be rendered without the entire page reloading. Slack is a great example of what I'm looking for, where clicking a different channel switches the conversation content, but does not reload the entire page.
I had a few ideas on how to implement this, but i'm not sure what's best:
Have a general react component (console.jsx) that accepts a urlparameter as a prop to determine which content (photos or settings) to render.
or 2. have a general react component and define a state variable that represents which content to render.
Any help would be greatly appreciated!
Have you heard about react router? Seems to be what you want.
react router

Categories