I have an image with a white background, which looks off on docusaurus dark theme, so I want to detect when the user changes theme so I use a different image.
If you are using the classic theme, you can leverage the useThemeContext hook to detect the current color mode setting. Since documents support MDX, you can create a component that conditionally displays the appropriate image based on the color mode value provided by the theme context. Here is a basic example.
This suggestion is based on using the following docusaurus versions:
>= #docusaurus/core#2.0.0-alpha.70
>= #docusaurus/preset-classic#2.0.0-alpha.70
ImageSwitcher Component File
Create a react component that can be imported to your documentation
import React from 'react';
import useThemeContext from '#theme/hooks/useThemeContext'; //docs: https://v2.docusaurus.io/docs/2.0.0-alpha.69/theme-classic#usethemecontext
const ImageSwitcher = ({lightImageSrc, darkImageSrc}) => {
const { isDarkTheme } = useThemeContext();
return (
<img src={isDarkTheme ? darkImageSrc : lightImageSrc} alt="Example banner" />
)
}
export default ImageSwitcher;
Documentation Markdown File
Import the component into your documentation and pass the appropiate image sources to the component.
---
id: your-docs
title: Your Docs
---
import ImageSwitcher from '../../../src/ImageSwitcher.js';
<ImageSwitcher
lightImageSrc="//satyr.io/300/black?text=LightMode"
darkImageSrc="//satyr.io/300/white?text=DarkMode"/>
for version 2.0.0-beta.15, you can get current theme mode like this:
import { useColorMode } from '#docusaurus/theme-common';
// ^^ I don't think it's in the docs yet, but I get the referencet from here
// https://github.com/rohit-gohri/redocusaurus/issues/116
const Component = () => {
const { isDarkTheme } = useColorMode();
return <div>{isDarkTheme ? 'Dark' : 'Light'}</div>;
};
Instead of creating a custom component, you can use Themed Images:
import ThemedImage from '#theme/ThemedImage';
import useBaseUrl from '#docusaurus/useBaseUrl';
<ThemedImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl('/img/docusaurus_light.svg'),
dark: useBaseUrl('/img/docusaurus_dark.svg'),
}}
/>;
With it, you will not have the following error:
`useThemeContext` is used outside of `Layout` Component.
br8dy's answer above works in development-mode, but will throw an error when you try to build the project - Docusaurus will complain that the component doesn't exist within a component (displaying a reference to this part of the docs).
The solution is to use BrowserOnly, as documented here.
Explicitly, you need to change this:
const ImageSwitcher = ({lightImageSrc, darkImageSrc}) => {
const { isDarkTheme } = useThemeContext();
return (
<img src={isDarkTheme ? darkImageSrc : lightImageSrc} alt="Example banner" />
)
}
To something like this:
const ImageSwitcher = ({lightImageSrc, darkImageSrc, altText}) => {
return (
<BrowserOnly fallback={<img src={darkImageSrc} alt={altText} />}>
{() => {
const { isDarkTheme } = useThemeContext();
const imgSrc = isDarkTheme ? darkImgSrc : lightImgSrc;
const fullImgSrc = useBaseUrl(imgSrc);
return (
<img src={fullImgSrc} alt={altText} />
)
}}
</BrowserOnly>
)
}
Now it is possible with the following, in a .mdx file:
import ThemedImage from '#theme/ThemedImage';
<ThemedImage
alt="Docusaurus themed image"
sources={{
light: useBaseUrl('/img/docusaurus_light.svg'),
dark: useBaseUrl('/img/docusaurus_dark.svg'),
}}
/>;
Reference: Docusaurus. Themed images
It sets attribute to html tag so you can check this attribute data-theme and listen to changes through MutationObserver.
Related
I am using react-native-navigation v2 and every component needs to be registered into the navigation by calling registerComponent(). However, I found myself having 500 lines of code where I register every component of my app using the same registerComponent structure with the only difference of using different jsx tag for every component I register, like so:
import ItemsList from './src/components/ItemsList';
import { Navigation } from "react-native-navigation";
import { Provider } from "react-redux";
import reduxStore from "./src/store";
Navigation.registerComponent(
"app.ItemsList",
() => props => (
<Provider store={reduxStore}>
<ItemsList {...props} />
</Provider>
),
() => ItemsList
);
+++ 35 more components almost exactly just like this one
Now, in order to reduce that huge amount of identical code, I've decided to write an IIFE that maps through an array of objects(components) that look like:
[...,
{
name: "ItemsList",
component: ItemsList
},
...]
then calls registerComponent on every item and returns the JSX I need, like so:
(function componentsRegistration() {
return components.map(({ name, component }) => {
const Tag = name;
Navigation.registerComponent(
`app.${name}`,
() => props => (
<Provider store={reduxStore}>
<Tag {...props} />
</Provider>
),
() => component
);
});
})()
After this specific manipulation, my app doesn't render anymore. Instead it throws the "Invariant Violation: View config is not found for name ItemsList". I think I've made all of this respecting the React commandments (capital letter jsx tag, etc.), however can't get it to work. If anyone could, please help.
[SOLVED] I was getting an error because I was trying to pass a string with the component name instead of the component itself.
The right way to do it would be:
const Tag = component;
instead of:
const Tag = name;
I am trying to adapt the design of my app to tablet and one way to detect if the app is running on a tablet is by using the DeviceInfo module in particular the isTablet() method. How can I use this method to conditionally apply styles to an element?
Here is what I am trying to do at the moment:
import { checkIfDeviceIsTablet } from './helper-functions';
<View style={[styles.wrapper, checkIfDeviceIsTablet() === true ? styles.wrapperTablet : {}]}>
{contents}
</View>
The checkIfDeviceIsTablet() function is as follows:
import DeviceInfo from 'react-native-device-info';
function checkIfDeviceIsTablet() {
DeviceInfo.isTablet().then(isTablet => {
return isTablet;
});
}
The issue is that when the component loads the checkIfDeviceIsTablet() method returns a promise as opposed to the expected true/false value and so the conditional styles are not applied when the app is run on a tablet. I tried turning the function into an async/await format with a try/catch but the result is the same.
I would use React Native's own Platform.isPad function but the app must also work on Android.
Any help is appreciated.
I would recommend calling DeviceInfo.isTablet() only once at the beginning of your app. You can store the result globally, and then later on you can check the type without having to deal with async promises.
To store the type globally, your options are:
A global variable
React's Context API
A static property on a class (if using ES6+)
Some sort of global state management solution like Redux
You still have to deal with the initial async problem, since the first call to DeviceInfo.isTablet() will return an async promise.
I'd recommend looking into React's Context API.
Here's a rough example:
render() {
return (
<DeviceInfoContext.Consumer>
{ ({ isTablet }) => (
<Text>Is this a tablet? {isTablet}</Text>
) }
</DeviceInfoContext.Consumer>
)
}
And your DeviceInfoContext class would look something like this:
class DeviceInfoContext extends React.Component {
state = {
isTablet: false
}
componentDidMount() {
Device.IsTablet().then(result => this.setState({ isTablet: result }))
}
render() {
return (
this.props.children({ isTablet: this.state.isTablet })
)
}
}
This is just a rough example. You can learn more about the Context API in the docs
Me too had some troubles with the breaking changes of react native 0.5xx to 0.6xx. The library for device detection change it structure to promises. A paintful.
This library save the day, the installation and use is very easy.
https://github.com/m0ngr31/react-native-device-detection
import { isTablet } from 'react-native-device-detection;
// isTablet is a boolean. Return false o true immediately
//So ...
import styled from 'styled-components/native';
import theme from 'styled-theming';
import { isTablet } from 'react-native-device-detection';
const CoverPageDateText = styled.Text`
font-size: ${isTablet ? 23 : 17};
color: gray;
padding-bottom: 9;
`
i have component with a simple structure and a <Text> somewhere inside the tree for which i want to pass in a style. Which works perfectly but for the proptypes validation.
The basic setup is not much more than that
export default class Component extends PureComponent {
render() {
return (<View><Text style={this.props.style}>Some text</Text></view>);
}
}
Component.defaultProps = {
style: null,
};
Component.propTypes = {
style: ViewPropTypes.style,
};
The problem is that the ViewPropTypes.style does not contain i.e. color key. So providing a style with a color is invalid and produces a warning. I tried to import TextStylePropTypes as i found in https://github.com/facebook/react-native/blob/master/Libraries/Text/TextStylePropTypes.js but it is undefined.
Any advice on what to do?
For anybody trying to achieve this seems like View.propTypes.style is deprecated while Text.propTypes.style is not.
As the passed style prop is for the Text node, use Text.propTypes.style as shown below...
Component.propTypes = {
style: Text.propTypes.style
};
If user has selected light-theme, and switches to dark-theme, then all scenes will immediately render to using the dark-theme.
I am using react-native-router-flux if this helps.
Thanks in advance,
Different approaches are possible. One of them is to use React context. Generally it should be used with caution but theming is one of the official examples where it is suitable.
Theming is a good example of when you might want an entire subtree to have access to some piece of information
So the example might look like
class App extends Component {
getChildContext() {
return {theme: { primaryColor: "purple" }};
}
...
}
App.childContextTypes = {
theme: React.PropTypes.object
};
where you set the context for rest of your application and then you use it in your components
class Button extends Component {
render() {
return <TouchableHighlight underlayColor={this.context.theme.primaryColor}>...
}
}
Button.contextTypes = {
theme: React.PropTypes.object
};
If you want to switch theme, you can set context based on your state/props that can be based on user selection.
Currently we are dealing with same questions and therefore we have starting prototyping library called react-native-themeable.
The idea is to use context to store theme and (re)implement RN components so they can replace original components but supports theming.
Example of theme switching you can find in https://github.com/instea/react-native-themeable/blob/master/examples/src/SwitchTheme.js
You can start by creating one JS file containing two objects that have the colors for each theme. Then just use one as a default and if the user picks another theme save it in the database or using local storage and pull the relevant object.
export const theme1 = {
blue: '#fddd',
red: '#ddddd',
buttonColor: '#fff'
}
export const theme2 = {
blue: '#fddd',
red: '#ddddd'
buttonColor: '#fff'
}
Then just import the relevant file:
import * as themes from 'Themes'
const currentTheme = this.props.currentTheme ? this.props.currentTheme : 'theme1'
const styles = StyleSheet.create({
button: {
color: themes[currentTheme].buttonColor
},
})
Wouldn’t it be great if you could import a colors object directly, and modify the object every time you change the theme and have those new colors propagate to the entire app? Then your components wouldn’t need to have any special theme logic. I was able to achieve this using a combination of AsyncStorage, forced app restart, and async module loading.
So I'm using Jade (Pug) to render my templates via Node, and I'm trying to use React to interact with various HTML elements. Is there a special way to do this?
React (favourite-item.js)
var FavouriteItemButton = React.createClass({
getInitialState: function () {
return {favourite: false};
},
handleClick: function (event) {
this.setState({favourite: !this.state.favourite});
},
render: function() {
var text = this.state.favourite ? 'like' : 'haven\t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
RenderDOM.render(
<FavouriteItemButton />,
document.getElementById('example')
);
I've imported React/React DOM and obviously the file above. I have a HTML element on my Jade (index.jade) template:
p#example like
But nothing is changing on click, I presume it's down to the tags or some special way to render React elements via Jade.
My includes:
script(type='text/javascript' src='js/libs/react.min.js')
script(type='text/javascript' src='js/libs/react-dom.js')
script(type='text/babel' src='js/favourite-item.js')
I'm right in thinking I should include the type as text/babel?