So I'm thinking of building an app with a dark and a light theme
I have separated into 2 files dark.js and light.js
then im going to have a reducer that gets fired by coming through from a query param to trigger the case to change to light and dark
however, Im stuck at the next part. what would be the best way to then say use either the light/dark file/object?
I was thinking of setting all the css in the reducer but that seems like overkill
has anyone got any good ideas?
Related
I have a camera that is animated using the alongpath component and I want the camera to stay focused on a target. I've tried using both orbit-controls and look-at components with no luck. For some reason, I can get them either to either do nothing or just their own crazy thing with no logic. Part of me feels like there could be a conflict between these and the alongpath component maybe? I'd love any advice on this!
Here is a glitch with what I am working with, along with both methods of orbit-controls + look-at that I used. https://glitch.com/edit/#!/aframe-camera-focus
I ended up getting it to work! I removed the rotation portion from the alongpath component, made the camera rig into just one entity and then applied look-at to it. https://glitch.com/edit/#!/aframe-alongpath-test
I want to build the simplest dark/light toggler button in react, there is. So far I have made a toggler component and gave it a state with
this.state = {style: './App.css'}
and 2 functions one is setting the this.state.style to ./darkmode.css the other one is back to ./App.css I binded them to 2 buttons. My question is, is there any way for using something like this: import 'this.state.style' instead of the import ./App.css in the App.js file? At least my way of thinking got me here, as this looked to be the easiest to do in order to change the stylesheet of the page. There is no big deal in the css files only smooth camera and bg color.
I don't think you can do that, but on the JS side you can change the class of the body element when pressing the button with .TogggleClass(). On the CSS side you just change the css.
the most suitable solution for making simple dark / light mode is by using Context API and useContext Hook it is easier, simpler and more readable than using any other solutions, you can make a whole new themes with this solution. so give it a try and you will definitely enjoy with the result and the experiment.
I am working on a home automation project with two bulbs. Please refer to the following state chart I created using xstate. I also have the gist so you can see it in the visualizer also.
https://xstate.js.org/viz/?gist=119995cdff639c5b99df55278a32cf57
You can see that I need to be in the autoInactive state so I can turn the bulbs on and off, this works fine. The problem is in the autoActive state I wanted to still turn the bulbs on and off but using a motion sensor.
So here is what i'm trying to do.
autoInactive - user can use UI to turn bulbs on and off.
autoActive - user cannot operate bulbs, but a motion sensor turns them on and off.
How can you achieve this using xstate?
I know you've said you already solved the problem, but I was just playing around to see how I would solve this - so maybe it helps you or someone else.
I basically approached the problem slightly differently (and that might not work in your context).
I thought the conditions of the lights (on or off) are actually quite independent from the mode you are in (automatic or manual). So I ended up with two parallel states, one for purely controlling the state of the lights, and one management interface state which allows for managing the lights differently based on the mode you are in:
https://xstate.js.org/viz/?gist=4b815be2cc42e6e51b15ba39c99d53dc
My team and I are working on a social media application built with React that we'd like to add a dark mode and light mode to. I've demo'd it so that I can write ternary in one class at a time and change state on, and change the css style. I was wondering if there was a better way to implement a dark or light mode or if there is a way to switch all class names at once, i.e. with a switch in the nav bar. I've looked up several tutorials but I haven't found a way to implement it optimally.
I've created a SPA Hearthstone card search that shows all (currently ~1200) cards on the same page. Site. The problem I have is that due to all 1200 cards being displayed on the same page it takes really long time to render. How would I best tackle this problem?
My ideas so far:
Lazy render parts of array that aren't immediately visible. This would seem best, but I don't know if it's possible and how. There's a package for react that seems to do this, so I guess it's possible somehow? I guess I could make a separate array for shown cards, which I would lazy append from first array based on how much the user has scrolled
Pagination. Obvious one, but it makes for some counter-intuitive behaviour along with the filters I have. I would like to avoid using pagination if possible.
For reference - here's the code for rendering the cards.
How would I go about making this render faster? Is lazy rendering possible and how is it best done?