React-dropzone style drop area - javascript

I am new to reactjs,
trying to create a component that uses react-dropzone.
I was wondering, what is the best way to override the default setting to style the drop area.
So far I have inline style, but it looks to me that I am not doing the 'right' thing.
<Row>
<Jumbotron className="text-center">
<h4>Create a manual call</h4>
<Dropzone
className=""
multiple={false}
onDrop={this.onDrop}
style={{"width" : "100%", "height" : "20%", "border" : "1px solid black"}}>
<div>
Try dropping some files here, or click to select files to upload.
</div>
</Dropzone>
</Jumbotron>
</Row>
Any help or better suggestion?
Thank you!

What you are doing is totally fine. If you would prefer you can write your styling in a .css file that you add to your project. Give the component a className and import the css somewhere in your project.
<Dropzone
className="dropzone"
multiple={false}
onDrop={this.onDrop}>
<div>
Try dropping some files here, or click to select files to upload.
</div>
</Dropzone>
/* styles.css */
.dropzone {
width : 100%;
height : 20%;
border : 1px solid black;
}
There are more involved libraries to do css-in-js like styled-components, but there is no 100% correct solution.

You can create a style object like this
const dropzoneStyle = {
width : "100%",
height : "20%",
border : "1px solid black"
};
Use the variable in jsx like this
<Dropzone
className=""
multiple={false}
onDrop={this.onDrop}
style={dropzoneStyle}
>
<div>
Try dropping some files here, or click to select files to upload.
</div>
</Dropzone>

Related

How To Disable Grid and its children in React js MUI

I Want to Disable Grid (MUI Component) (and its Children) in React js .
and also , I Want to know how to Disable any Container and it's items in React js! (No matter what kind of children it has)
ex:
<Grid
item
disabled //And any other options
xs={12}
md={6}
spacing={1}
style={{ padding: '5px' }}>
<CmpDateTimePicker
label="from"
value={this.props.from_timestamp}
onChange={(from_timestamp) =>
this.props.OnFromPeriodChanged(from_timestamp)}
dir={dir}
intl={intl}
preSelect={lastMonthDate}
/>
</Grid>
Thanks for your Help! :)
The disabled prop is not available on every MUI component, but instead you can conditionally render a component by using a simple if statement or ternary operator.
Since you give no context for the above code, I can't directly give you an example, but I can give examples for the two cases I spoke about above.
You can use an if statement like:
if(<conditional>){
return <Grid>...</Grid>
}
return <div></div>
With this code your component will only render what is in the if statement when your conditional is true.
Another way is to use a ternary:
return (
<div>
{<conditional>?<Grid>
...
</Grid>:""}
</div>
)
You can use this inside of jsx to only conditionally render a certain component.
We Can disable Element via pointer-events: none property.
js file:
<Grid
item
className={this.state.isDisabled ? "container-disabled" : "container"}
xs={12}
md={6}
spacing={1}
style={{ padding: '5px' }}>
<CmpDateTimePicker
label="from"
value={this.props.from_timestamp}
onChange={(from_timestamp) =>
this.props.OnFromPeriodChanged(from_timestamp)}
dir={dir}
intl={intl}
preSelect={lastMonthDate}
/>
</Grid>
css file:
.container-disabled{
pointer-events: none;
}
.container{
/* some styles */
}

How to prevent text overflow in card component in Ant design

I am using the card component to design a card with image and a title and description
<div>
<Card
hoverable
style={{ width: 700, wordWrap: 'break-word'}}
cover={<img alt="example" src={ urlToImage } />}
>
<Meta title={ title } description={ content } />
</Card>
</div>
The problem is that since the length of title is large it seems to do a text overflow on the same.
I tried adding a custom JSX to the title component but it does not allow styling for some reason
Link to the sand box SandBox Link
Could change the css. It uses a class .ant-card-meta-title. In css file add
.ant-card-meta-title {
white-space: pre-line;
}
.ant-card-meta-title {
white-space: pre-line;
}

How to add background image from local folder to a container

I want to set the background image of a container div from an image from a local folder. Does anyone know what i need to add to my code/ how to edit it to do this? Currently the image isnt showing for some reason.
class Team extends React.Component{
render(){
let style = {
backgroundRepeat: 'no-repeat',
backgroundImage:'url("../images/Football_Field.png")',
backgroundSize: '100% 100%',
backgroundPosition: 'center',
width: '100%',
height: '100%',
border: '2px dashed #333'
}
return (
<div className="container" style={style}>
<i className="fas fa-tshirt"></i>
</div>
)
}
}
export default Team
The image is in a 'image' folder inside the src folder. (/src/images/Football_Field.png)
The Team components file path is '/src/components/Team'.
Would anyone also know how to do this if i instead used a ui container class?
You could do something like it in your render method :)
Do Know that the path is rooted at the public folder once it's compiled
render()
{
const image = './images/tasse_kandinsky.webp';
return(
<div className='product'>
<div className='product-image' style={{backgroundImage: 'url('+image+')'}}>
</div>
</div>
)
}
Depending on your webpack configuration, you could do something like this:
import backgroundImage from "../images/Football_Field.png";
class Team extends React.Component{
render(){
let style = {
backgroundRepeat: 'no-repeat',
backgroundImage:'url(' + backgroundImage + ')',
backgroundSize: '100% 100%',
backgroundPosition: 'center',
width: '100%',
height: '100%',
border: '2px dashed #333'
}
return (
<div className="container" style={style}>
<i className="fas fa-tshirt"></i>
</div>
)
}
}
export default Team
Otherwise add your image to your public folder and change the url accordingly.
Maybe this helps ->
https://create-react-app.dev/docs/using-the-public-folder/
All you need is a static folder to serve assets, and if you used create-react-app, you just need to put your images in the public folder and follow the doc above.

How to solve TypeError: jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).faceDetection is not a function

I am trying to use a face detection library. I have linked it in my index.html with script tag and want to use that file in my profile_pic component. On componentDidMount when I call the function it says that face_detection is not a function. When I used the same file with simple javascript it ran successfully. Now how do I use it with react?
I am getting the image from img tag and there is a file input control that is used to change the value of image dynamically.
This is my render method
render() {
return (
<div
style={{
marginTop: "20px",
display: "flex",
flexDirection: "column",
alignItems: "center"
}}
>
{/* div for upload photo starts*/}
<div>
<input
accept="image/*"
type="file"
id="image_upload"
style={{ display: "none" }}
onChange={e => {
this.handle_image_upload(e);
}}
/>
<label htmlFor="image_upload">
<img
id='picture'
src={this.state.image}
alt="Man or Woman"
style={{ width: "150px", height: "150px", cursor: "pointer" }}
/>
</label>
</div>
</div>
);
}
and here is the componentDidMount lifecycle method
componentDidMount() {
document.getElementById("image_upload").addEventListener("change",()=>{this.face_detection()})
}
This is the face_detection function
face_detection=()=>{
console.log($('#picture'))
$('#picture').faceDetection({
complete: function (faces) {
if (faces.length > 0) {
console.log('There is a face in this image')
}
}
});
}
I have successfully used the same library without react. Now how do I solve this error?
It seems the library that provides 'faceDetection()' function is not defined. Related library should be defined in 'webpack.config.js' or in one of js files of project using 'import' or 'require'. For example, below line imports 'myLibrary' (which locates inside 'libraries' dir) in your React component:
import * as myLibrary from '../libraries/myLibrary';
Now, 'faceDetection()' can be used like this:
myLibrary.faceDetection(...);

How to hide overflow text content in react

I try to implement the functionality to hide text that overflow grid component.
But still the text is not hidden. So I want to know how to implement this functionality.
Front : React
css framework : semantic-ui-react
Here is the target code:
render() {
return (
<Container style={{marginTop: '3em'}} text>
<Grid columns={1} divided="vertically">
<Grid.Row>
{(this.state.articleDatas || []).map(function(articleData, i) {
return (
<Grid.Column>
<Segment>
<Header as="h1">{articleData.title}</Header>
<p style={{textOverflow: 'clip'}}>
{articleData.content.length > 100
? articleData.content.substring(0, 97) + '...'
: articleData.content}
</p>
</Segment>
</Grid.Column>
);
})}
</Grid.Row>
</Grid>
</Container>
);
}
This is the current status on the screen.
https://s19.aconvert.com/convert/p3r68-cdx67/gpext-9x16c.gif
I want to hide overflowed text automatically to widen or shorten component like below picture.
The full source code is here:
https://github.com/jpskgc/article/blob/master/client/src/components/List.tsx
I expect the overflowed text to be hidden.
But the actual is not. So I want to know how to hide it.
You can try word-break property in CSS. Consider the element with class myElement:
.myElement {
word-break: break-all;
}
style={{overflow: "hidden"}}

Categories