I've spent two days trying to figure out how to create a button with image in React but so far not able to achieve something shown below.
Screenshot of what I'm trying to achieve -- Files and Folders there are clickable buttons:
I'm willing to use MUI or even better if this can be done using plain react.
Appreciate if anyone can show me how this can be done.
Use This Code
import Button from '#mui/material/Button';
export default function App() {
return (
<>
<Button variant="text" size="small" style={{display: "flex", flexDirection: "column"}}>
<img src="https://www.tenforums.com/geek/gars/images/2/types/thumb_14486407500Folder.png" width="100" alt="folder"/>
<label>Pictures</label>
</Button>
</>
);
}
You can do something similar as well
export default function App() {
return (
<div className="App">
<img
src="https://www.tenforums.com/geek/gars/images/2/types/thumb_14486407500Folder.png"
alt=""
onClick={handleClick}
id="secret_folder"
/>
</div>
);
function handleClick(e) {
if (e.target.id === "secret_folder") {
console.log("you clicked");
}
}
}
Related
I'm trying to get a React Booststrap Modal working inside a container I've tried in many different ways but I'm not getting it to work inside the container (div), I honestly don't know why.
The code is a little long, so I will let you a snippet of the code.
MisListas.js
function MisListas() {
const listContainer=useRef(null)
return (
<div ref={listContainer}> //Here is the ref
// Some Code
<Row xs={2} sm={3} md={4} lg={4} xl={5}>
{search && search.map(product =>{
return (
<ListProduct
product={
{
...product,
BasePrice: product.Price,
FinalPrice: product.Price
}
}
container={listContainer}/>
)})}
</Row>
</div>
)
}
Product.js
This is the Modal:
function Product({product,container}) {
return(
<div>
<Modal
show={isOpen}
onHide={handleClose}
container={container.current}
backdrop={false}
enforceFocus={false}
className="modal-clase-productList"
>
//Some Code
</Modal>
</div>
)
}
This is a simplified version of the code. As you can see I am passing the ref (listContainer) as the container of the modal as container.ref. But the modal keeps taking the whole screen when it opens.
Any idea how can I make it work?
I'm trying to make a preview for a pdf file for items in my database that have a pdf file attached to them. Right now, I'm trying to use React's pdf module but can't seem to get it to work. I'm unsure why it's working and would like to know how to make it work right now. What I want is when you click the button Preview, I want it to go to open up a separate page with the pdf there. My end goal is to have a mini viewer, so once you click the button, a mini viewer that takes up roughly 1/3 of the screen pops up in the middle where you can scroll and view the pdf.
I would appreciate it if I could have some help in terms of reaching these goals of mine.
Here's my code:
import "../styles/ProjectDetails.css";
import React, { useState } from 'react'
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack'
function PdfViewer() {
const [numPage, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);
function onDocumentLoadSuccess({numPages}) {
setNumPages(numPage);
setPageNumber(1);
}
return (
<div>
<header>
<Document file="../pdfs/Mini_Case_Study_15.pdf" onLoadSuccess={onDocumentLoadSuccess}>
<Page height="600" pageNumber={pageNumber}></Page>
</Document>
</header>
</div>
)
}
const ProjectDetails = ({ project }) => {
return (
<div className="card-grid">
<div className="card">
<div className="card-header card-image">
<img src="https://c4.wallpaperflare.com/wallpaper/672/357/220/road-background-color-hd-wallpaper-thumb.jpg"/>
</div>
<div className="card-title"><strong>{project.sdg}</strong></div>
<div className="card-body">
<strong>Goal:</strong> {project.goal}
</div>
<div className="card-themes">
<strong>Themes:</strong> {project.theme.map((theme)=>{return theme + ', '})}
</div>
<div className="card-assignment">
<strong>Assignment Type:</strong> {project.assignment_type}
</div>
<div className="card-footer">
<button className="btn">Details</button>
{project.assignment_type === 'Mini Case Studies' &&
<>
<button className="btn btn-outline">Download</button>
<button onClick={PdfViewer} className="btn">Preview</button>
</>
}
{project.assignment_type !== 'Mini Case Studies' &&
<button className="btn btn-outline" onClick={function(event){ navigator.clipboard.writeText(project.goal); alert('Text copied to clipboard!') }}
>
Copy to Clipboard
</button>
}
</div>
</div>
</div>
)
}
export default ProjectDetails
I have a page with a table which is working quite fine and is very performant as it should be. I'm now trying to implement a filter for it so the users can easily check only what they need. But one weird thing is happening. If I have the filter component commented out, everything works fine. If I include it in the component it should be, the browser becomes extremely slow and even crashes my chrome tab. I was trying to comment out all the code in that component to check where the problem is but I can't figure it out.
My weird component code without the comments:
import { Grid, LuxButton } from 'luxclusif-material';
import React, { useState } from 'react';
import { FilterComponentStyles } from './FilterComponent.styles';
export default function FilterComponent() {
const classes = FilterComponentStyles();
const [status, setStatus] = useState('Supplier');
return (
<>
<div className={classes.spacing}>
{/* commented out stuff */}
</div>
<div className={`${classes.statusMenu} ${classes.spacing}`}>
<Grid
container
direction="row"
justify="flex-start"
alignItems="center"
className={classes.heightStatus}>
<div className={classes.rightMargin}>
<LuxButton
variant="contained"
luxColor={(status === 'Supplier' ? 'secondary' : 'default')}
onClick={() => setStatus('Supplier')}
className={classes.transformTextNone}
disableElevation>
<span className={classes.addButtonText}>Supplier</span>
</LuxButton>
</div>
<div className={classes.rightMargin}>
<LuxButton
variant="contained"
luxColor={(status === 'Active' ? 'secondary' : 'default')}
onClick={() => setStatus('Active')}
className={classes.transformTextNone}
disableElevation>
<span className={classes.addButtonText}>Active</span>
</LuxButton>
</div>
<div className={classes.rightMargin}>
<LuxButton
variant="contained"
luxColor={(status === 'Inactive' ? 'secondary' : 'default')}
onClick={() => setStatus('Inactive')}
className={classes.transformTextNone}
disableElevation>
<span className={classes.addButtonText}>Inactive</span>
</LuxButton>
</div>
</Grid>
</div>
</>
);
}
This FilterComponent is being called like this:
<TableContainer component={Paper} >
<FilterComponent ></FilterComponent>
<Table>
{/* table code */}
</Table>
</TableContainer>
Notes: LuxButton is an extension of material-ui Button and its luxColor property is the extension to the color property.
I need to have only one button doing two things one by one. I have two buttons "Обучить" and "Генерировать" and they both do something onClick. Is it possible to do it all with one button?
<Button
variant="contained"
color="primary"
style={{
background:
"linear-gradient(45deg, #00ACD3 30%, #00BE68 90%)"
}}
onClick={this.parseInput}
>
Обучить
</Button>
<Button
variant="contained"
color="primary"
style={{
background:
"linear-gradient(45deg, #00ACD3 30%, #00BE68 90%)"
}}
onClick={() => {
this.props.updateData(this.state.filterArray);
}}
>
Генерировать
</Button>
Of course you can. You can use a variable to decide what action you want to perform on onClick function
onClick={() => {
if(this.props.type == 'update')
this.props.updateData(this.state.filterArray);
else
this.parseInput()
}}
You can use same property type (or anything you like) to render different labels
{{this.props.type=='update'? 'Генерировать': 'Обучить'}}
I assume that you want to make a component reusable? In that case you might want to design your component like so.
const NewButton = ({onClick, children}) => (
<Button
variant="contained"
color="primary"
style={{
background: "linear-gradient(45deg, #00ACD3 30%, #00BE68)
}}
onClick={onClick}>
children
</Button>);
Then your above snip becomes
<NewButton onClick={someFunction}>Something</NewButton>
<NewButton onClick={otherFunction}>Something</NewButton>
This is the basic idea behind any component-based front-end framework and I suggest you go to the react tutorials to learn more.
Otherwise, there are plenty of good articles about the topic out there
If I understand you correctly, you want to use the same component but make them do different things, on click for example.
Here is an example of how you can do it.
import React from 'react';
const Button = ({onClick}) => {
return (
<button
onClick={onClick}
>
Click on me
</button>
)
}
export default Button;
So when you want to pass down a method to the button, you can do it like this.
import Button from './button';
clickerTicker() {
alert("First method, clickerticker");
}
secondaryClick() {
alert("Second method yo");
}
render() {
return (
<div>
<ButtonComponent onClick={this.clickerTicker.bind(this)}/>
<br/>
<ButtonComponent onClick={this.secondaryClick.bind(this)}/>
</div>
);
}
Just pass the onClick to the component
I am trying to embed a twitter timeline of a particular page in a react-bootstrap Panel however I am unable to get it to work.
I am not getting any console logging output which makes me think that I have not gotten it set up properly, however I am unsure as to what the issue is.
I am using react-twitter-widgets to embed the timeline.
My component is as follows:
import React from 'react';
import { Timeline } from 'react-twitter-widgets';
function twitterTimeline() {
return (
<Timeline
dataSource={{
sourceType: 'profile',
screenName: 'MetEireann',
}}
options={{
username: 'MetEireann',
height: '400',
}}
onLoad={() => console.log('Timeline is loaded!')}
/>
);
}
export default twitterTimeline;
And then I am using it like so in my react-bootstrap Panel:
import twitterTimeline from '../../components/TwitterTimeline';
.....
<div className="col-lg-4">
<Panel
header={<span>
<i className="fa fa-bar-chart fa-fw" /> Weather Forecast
</span>}
>
<twitterTimeline />
</Panel>
</div>
The component is being loaded in so the issue is obviously with the component itself.
Any help would be greatly appreciated. Thanks in advance.