I have looked at different solutions on SO, but nothing has worked so far, and I couldn't find anything in the documentation. I have done things like:
in my Icon context provider:
style:{transform: [{ rotate: '90deg' }]}
as well as inserting the style directly into the icon tag like:
<BiCard style = {{transform: [{ rotate: '90deg' }]}}>
But none of this seems to be working. I have tried rotateX and rotateY as well. Is there some newer way to do this?
you should pass a string to your transform property not an array.
If you pass as below it should work as expected:
<BiCard style = {{transform: 'rotate(90deg)' }} />
Related
We've been using pointerEvents: 'box-none' for a particular View where we want the things behind it to be clickable. From the React docs: https://reactnative.dev/docs/view
'box-none': The View is never the target of touch events but its subviews can be. It behaves like if the view had the following classes in CSS:
.box-none {
pointer-events: none;
}
.box-none * {
pointer-events: auto;
}
But we just updated to React 18, and now that view seems to be snagging all of the pointer events instead of letting them pass through to the background.
Any ideas what might be going wrong? Any fix suggestions?
From React docs in the yellow box:
https://reactnative.dev/docs/view#pointerevents
"Since pointerEvents does not affect layout/appearance, and we are already deviating from the spec by adding additional modes, we opt to not include pointerEvents on style. On some platforms, we would need to implement it as a className anyways. Using style or not is an implementation detail of the platform."
so you need to put it as direct prop on the ViewElement like this:
<View pointerEvents="box-none"></View>
instead of:
<View style={{pointerEvents: 'box-none'}}></View>
I integrated the nivo library. I managed to get this pie chart to work:
For this, I used this slightly modified code from the example:
<ResponsivePie
data={data}
margin={config.margins}
padding={0.3}
colors="nivo"
borderColor="inherit:darker(1.6)"
animate
motionStiffness={90}
motionDamping={15}
legends={config.legends}
sortByValue
innerRadius={0}
padAngle={0}
cornerRadius={0}
borderWidth={0}
radialLabelsSkipAngle={10}
radialLabelsTextXOffset={6}
radialLabelsTextColor="#333333"
radialLabelsLinkOffset={0}
radialLabelsLinkDiagonalLength={16}
radialLabelsLinkHorizontalLength={24}
radialLabelsLinkStrokeWidth={1}
radialLabelsLinkColor="#CCCCCC"
slicesLabelsSkipAngle={10}
slicesLabelsTextColor="#333333"
/>
Now, I wanted the colors to be a grayscale, so I changed the colors prop to "greys", as shown in their docs:
colors={{ scheme: 'greys' }}
This results in:
I also tried:
colors="greys"
Using "greens" also results in the same.
If you want to try it out:
What do I need to do?
I see that this is an old question, but I recently encountered the same issue when integrating with nivo. However I did find a solution so I decided to share it anyway.
After playing around with it I found that the code provided in the interactive view is not valid in React, if you would like to use a theme you should use the following syntax:
colors={"nivo"} // or the name of the theme you picked
instead of:
colors={{ scheme: 'nivo' }}
PS: If you want to use some of the other themes you might need to supply them additionally since just a couple of them come with nivo by default.
In my system I have a few images that a user can have presented and it's extremely advantageous to me to be able to just pass in an id and then have that image be presented to the user.
(One use case: Articles in the system have images associated with them, there are many articles in the system, it'd be ideal to pull out just the image-id and have the image dynamically displayed based upon that id. There is no realistic possible way I can statically give an image path for each article.)
Unfortunately I've tried to figure this out and haven't gotten far at all. I'd be super-duper appreciative of a "Explain it to me like I am 5" answer on this one.
I have been trying to use images in two different ways and both have unfortunately not worked at all for me. Where unfortunately I am going to need both to continue :(
1: Putting it as a background of a div. [I am using it as a carousel with overlaying text here.]
2: Putting it as just a standalone image. [This is going to make up the 95%+ case of image use through the webapp.]
I'd love to in a perfect world just pass in an object like this to props.
articleDetails = {
articleId: 38387,
articleTitle: "Magical Unicorn Article"
articleContent: "I am not that creative, but here is some content."
}
<IndividualArticle article={articleDetails}/>
Then for props to take this in and convert it into the image path to my local files.
templateStringForImage = `../../../../articleImages/${this.props.article.articleId}.png`
Then for this template string to be used as:
1: the background image of a div
<div
className="container"
style={{
backgroundImage: `url(${templateStringForImage})` ,
height: "576px"
}}
enter code here
</div>
2: standalone image
<Image
src={require({templateStringForImage})}
/>
Some of the things I've tried:
I've tried a few changes like changing the code around to be like:
var Background = `../../../images/articleImages/${
this.props.article.image
}`;
<div style={{
backgroundImage: url('../../../images/articleImages/article3Image.png'),
height: "576px"
}}
But unfortunately that only gave me these errors.
Line 32: 'url' is not defined no-undef
Also when I went to try and use the new Background object like this I got a different error
var Background = `../../../images/articleImages/${
this.props.article.image
}`;
<Image
src={require({Background})}
/>
The error was:
Error: Cannot find module '[object Object]'
My current system/errors:
-I have a bunch of images like article1Image.png, article2Image.png, article3Image.png specified in the src code in an image folder.
-I want to pass "article1Image.png" into the object directly and have an image produced.
-I tried to do something like this and it has consistently failed, I don't even get an error message when I attempt to use it as a backgroundImage on a div unfortunately... it's literally just blank space on my screen. No broken image icon, just a void.
var Background = `'../../../images/articleImages/${
this.props.article.image
}'`;
<div
style={{
backgroundImage: `url(${Background})`,
height: "576px"
}}
-When attempting to use semantic-ui's Image I am also running into a nasty error
<Image
src={require(Background)}
/>
Error:
Error: Cannot find module ''../../../images/articleImages/article2Image.png''
Yet shockingly enough THIS works, when I give it as a static string like this.
<Image
src={require('../../../images/articleImages/article2Image.png')}
/>
But even when I give the string path directly into the backgroundImage of the div it still appears empty...
<div
style={{
backgroundImage: `url(../../../images/articleImages/article3Image.png)`,
height: "576px"
}}
Thanks all I truly appreciate the help lots and lots!
There are 2 different solutions based on what you have tried.
URL
If you want to access them via style={{ backgroundImage: 'url(...)' }}, the url will need to be accessible from the front-end. If you used create-react-app, that would mean placing images in the public folder instead of the src folder.
So if you had images in the public folder like: /public/articleImages/article2Image.png, you could use the url style attribute:
const imageName = 'article2Image.png';
<div style={{ backgroundImage: `url('/articleImages/${imageName}')` }}>
...
</div>
<img src={`/articleImages/${imageName}`} />
If you aren't using create-react-app config, then you will need to make the images available via however you are serving your application (i.e. express).
Require
This one is a little tricky, and I'm not 100% why it doesn't work out of the box.
What I had to do when testing this was to require all of my images at the top of the file, hard-coded, and then I was able to use the require(stringTemplate) just fine. But I was getting a Error: fileName hasn't been transpiled yet., so I'm not sure if the same fix will work for you.
It basically looks like this:
require('../../../images/articleImages/article1Image.png');
require('../../../images/articleImages/article2Image.png');
...
// This code would be inside a component
const imageName = 'article2Image.png';
const filePath = '../../../images/articleImages/${imageName}';
const fileUrl = require(filePath);
<div style={{ backgroundImage: `url(${fileUrl})` }}>
...
</div>
<img src={fileUrl} />
Without the require(s) at the top of the file, something goes wrong with transpilation.
My suggestion would be go the static assets route which would allow you to use the URL technique above. require is more suited to static files that don't change often like icons.
Feel free to ask any questions, and I'd be happy to clarify and give more examples.
this is a very easy question, but I can not decide what is the cleanest nor actually to get it to work. I have this JSX-part in a reactJS class, and would like to set position dynamically through a prop-value. Which tag attribute should I add to the following code snippet? I have seen examples with style and tried setting left and right etc without any success.
Any help is appreciated.
<img onClick={this.handleKeyPress} src="/image/1" alt="HTML5" width="200" height="200" />
JSX is a prepocessor syntax that will essentially create a bunch of React.createElement function calls with the right elements/components passed in to the different calls. So instead of doing React.createElement('div', props, children) for every container/component/piece of markup you want to create. The upside is that you can return component markup that's easy to read and understand but feels more familiar and easy to write than a ton of nested function calls.
There are a few key differences between regular HTML and JSX, though. Most of them stem from the clashes w/ JavaScript reserved words:
some attributes are camelCased and named slightly differently, like htmlFor (as opposed to for)
style gets passed in to the style property as an object via an outer JSX expression {{}}
most css names are different if they use a hyphen, but most just get camelCased. So: marginLeft, paddingRight, and so on
you can pass in style props just like you'd pass other props; they just go right into the style object you create for the component/element.
custom attributes (created with a hyphen) won't get rendered except for those that follow the aria spec (aria-, etc.)
So, taking that into consideration, your image component might look something like this:
<img onClick={this.handleKeyPress}
src="/image/1"
alt="HTML5"
style={{width: 200, height: 200, position: 'absolute', top: this.props.top, left: this.props.left}}/>
See also:
https://facebook.github.io/react/docs/dom-differences.html
https://facebook.github.io/react/docs/jsx-gotchas.html
Make sure you use the double curly braces on style or use a class:
<img onClick={this.handleKeyPress} src="/image/1" alt="HTML5" style={{width:"200", height:"200"}} />
<img onClick={this.handleKeyPress} src="/image/1" alt="HTML5" className="foo" />
In JSX ES6 an image needs to be imported before using it in component, or use src tag with require followed by image path within round braces all within curly braces.
you can set image property by using style tag followed by double curly braces. Don't need to give double or single inverted commas.
your image component might look something like this:
<img onClick={this.handleKeyPress} src={require("/image/1")} style={{ width: 200, height: 200 }} />
You can also use props or state value to define image properties in between style tag. Don't forgot to set state value before using this. You can set state values directly through props or through function.
This looks something like this (using through state values):
<img onClick={this.handleKeyPress} src={require("/image/1")} style={{ width: this.state.width, height: this.state.height }} />
OR
looks something like this (directly through props):
<img onClick={this.handleKeyPress} src={require("/image/1")} style={{ width: this.props.width, height: this.props.height }} />
This appears on all of the columns in my grid:
Chrome 28.0.1500.72 m:
Firefox 21.0:
All of the columns in my table look something like this:
{
text: 'Audit Type',
width: 100,
sortable: true,
dataIndex: 'requestType'
},
I have no idea what's causing this. The javascript console shows no errors about missing images either.
Any help that could point me in the right direction would be greatly appreciated
More info
I'm using Chrome Version 28.0.1500.72 m and Extjs 4.2.1.883
My app is run on my own computer... so a local server. I'm using Play Framework with Scala on my backend.
Oh what silliness.
I did this earlier:
.x-panel {margin: 8em;}
This ended up moving the entire grid except for the menu shadows.
Giving the grid an id property in its definition and having this instead in my stylesheet solves the problem:
#grid {margin: 8em;}