I am new in react and trying to use react awsome slider its working fine but i want to add button and text on slider image but dont know how to do that.
Here is my slider component
import React, { Component } from 'react'
import slider1 from '../images/slider/1.jpg'
import AwesomeSlider from 'react-awesome-slider'
import withAutoplay from 'react-awesome-slider/dist/autoplay'
import 'react-awesome-slider/dist/styles.css'
const AutoplaySlider = withAutoplay(AwesomeSlider)
class Slider extends Component {
render () {
return (
<div className='slider-area'>
<AutoplaySlider
play
cancelOnInteraction={false} // should stop playing on user interaction
interval={6000}
>
<div data-src={slider1} />
<div data-src={slider1} />
<div data-src={slider1} />
</AutoplaySlider>
</div>
)
}
}
I would really appreciate if someone can help.
thanks
Set organicArrows prop to false and provide buttonContentRight and buttonContentLeft. It will work.
Working demo - it shows custom text instead of arrow. You can add a button etc.
Code snippet
<AwesomeSlider
organicArrows={false}
buttonContentRight={<p style={{ color: "black" }}>Right</p>}
buttonContentLeft={<p style={{ color: "black" }}>Right</p>}
play
cancelOnInteraction={false} // should stop playing on user interaction
interval={6000}
>
<div data-src={"https://randomuser.me/api/portraits/women/43.jpg"} />
<div data-src={"https://randomuser.me/api/portraits/women/44.jpg"} />
</AwesomeSlider>
Related
I have created a functionality for my "menu item buttons" to display their assigned data through an object format into a separate page component called "SidePage" (gained help also here in StackOverflow). What I am not sure is that if this functionality that I have created is a formal or effective one since I am planning to implement a backend functionality into my full main app. The functionality involves useState, onClick, and onSelected.
I used props to hold the resulting data after the "menu item button" is clicked.
(Chicken Button should be clicked first in order to display the menu item buttons)
SidePage source code:
import * as React from "react";
import { Typography } from "#mui/material";
export default function SidePage(props) {
return (
<div>
<Typography sx={{ mt: 20 }}>Menu Item Details:</Typography>
<div>{props.menuItemDetails}</div>
</div>
);
}
HomeOrderPage (main page) source code:
import * as React from "react";
import { useState } from "react";
import { Stack } from "#mui/material";
import ButtonCategoryStyle from "./ButtonCategoryStyle";
import ChickenButtons from "./categoryButtons/ChickenButtons";
import SidePage from "./SidePage";
const categories = ["Chicken"];
export default function HomeOrderPage() {
const [myCategory, setMyCategory] = useState("");
const [food, setFood] = useState(null);
return (
<div>
<Stack spacing={0} direction="row">
{categories.map((category) => (
<ButtonCategoryStyle
title={category.toLocaleUpperCase()}
key={category}
onClick={() => setMyCategory(category)}
/>
))}
</Stack>
<div>
<p>
{myCategory === "Chicken" && <ChickenButtons onSelected={setFood} />}
</p>
{/* ------------------------------------------------------------------------------------------------ */}
</div>
{/* Displays object after menu item is clicked and renders the side page to show the menu item details:: */}
<div
style={{
backgroundColor: "blue"
}}
>
<SidePage
menuItemDetails={
food && <pre sx={{ ml: 120 }}>{JSON.stringify(food, null, 2)}</pre>
}
/>
</div>
</div>
);
}
Full source code (CodeSandbox): https://codesandbox.io/s/nice-stack-question-page-component-data-transfer-ejebxz?file=/src/HomeOrderPage.jsx
What I also want is to store the property values of the object into variables (in order to display the details of the selected menu item button properly but I am not sure how to do this since I am baffled with using this.state or still using props for this.
Hoping for all of your response as this would help me a lot with my first big React project that I am working on. Thank you very much everyone!
Since you already have props. Why copy it to state? Just keep single source of truth.
I'm trying to add a background image to an entire welcome page in NextJS and it's just not working. Before, I was having trouble with the fact that NextJS seems to render every component inside a master component that becomes an html div with a class of "__next". Therefore, every time I try and add a background image that takes the full page, it is only as big as the "__next" div and is cut off. I tried using NextJS' image component, but now it doesn't even load the image and just displays the alt text. Can anyone tell me how to fix the following code?
import React from "react";
import styles from "/styles/WelcomePage.module.css";
import Card from "/Components/Card";
import Link from "next/link";
import Image from "next/image";
function WelcomePage() {
return (
<>
<Card>
<h1 className={styles.title}>Welcome to Class Chooser</h1>
<button type="button">
<Link href="/ClassSearch"> Class Search </Link>
</button>
<Image
src="/images/graduates.jpg"
alt="Cartoon graduates jump with happiness"
quality="100"
layout="fill"
/>
</Card>
</>
);
}
export default WelcomePage;
To add a background image simply do it via CSS:
.card {
background-image: url("/images/graduates.jpg");
}
make your parent component (Card) position relative and add below properties to next-image.
layout="fill"
objectFit="cover"
position relative should be there for which you need to apply image as a background.
When you add layout="fill" to Image you need to wraper Image component in parent element and assing postion property to parent (relative, absolute, ...).
Wrap your Image inside a parent div, and make your parent position fixed
<div className="bg-image-wrapper">
<Image
src="/images/graduates.jpg"
alt="Cartoon graduates jump with happiness"
quality="100"
layout="fill"
/>
</div>
In css
.bg-image-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
I am using react JS and I want to make use of an icon to basically make it look like a dropdown. Screenshot attached to this question.
I am able to call an onClick function using a button but the same code is not working with an i tag. The tutorial I am following may have been outdated. But I want to know the alternative.
Here is my class component.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Contact extends Component {
state = {}
onShowClick = (name, e) => {
console.log(name);
};
render() {
const { name, email, phone } = this.props;
return (
<div className='card card-body mb-3'>
<h4>{name}{' '} <i onClick={this.onShowClick.bind(this, name)} className='fas fa-sort-down' /></h4>
<button onClick={this.onShowClick.bind(this, name)}>Button</button>
<ul className='list-group'>
<li className='list-group-item'>E-mail: {email}</li>
<li className='list-group-item'>Phone: {phone}</li>
</ul>
</div>
);
}
}
// PropTypes - TypeChecking
Contact.propTypes = {
name: PropTypes.string.isRequired,
email: PropTypes.string.isRequired,
phone: PropTypes.string.isRequired
}
export default Contact;
My problem is with the tag inside the h4 tag.
The function onShowClick works perfectly fine with the button but not the icon.
I have used .bind and all and yet, I see no results.
How do I get it working?
Thanks for the help.
Top of my head, without reproducible minimal project, I am thinking of a couple reasons why this wouldn't be working main one being the following:
HTML is not handling your onClick properly because it is wrapped in a h4 and applied on a i tag. I strongly recommend avoiding adding the click events on h and I tags. What you could do here is have a wrapper div, get your h4 inline with your i tag, and wrap the latter with an other div onto which you apply your onClick.
Your code should work but you have to realize that the i element is not a button. This element shouldn't handle click events for multiple reasons like keyboard navigation, and ATs. A better practice would be to wrap this icon with a button. You can also reset the css of the button.
<button
style={{
border: "none",
margin: 0,
padding: 0,
background: "none"
}}
onClick={this.onShowClick.bind(this, name)}
>
<i className="fas fa-sort-down" />
</button>
<input type="hidden" id="trix-input"
value="<div>abc <span style="color:red;">123</span></div>"
/>
<trix-editor input="trix-input"></trix-editor>
I expect the code above to print abc 123(red color), however the value is stripped from its CSS styles.
The code above works on an HTML page, however when I put it on a react component CSS styles get removed.
I'd appreciate any help.
Thanks
Update:
React Component - CSS gets stripped
<trix-editor
style={{ minHeight: 300 }}
input={"trix" + this.props.index}
ref={this.trixInput}
/>
<input
type="hidden"
id={"trix" + this.props.index}
value={this.props.journals.article.paragraphs[this.props.index].paragraph}
className={classnames('', { 'is-invalid': errors.paragraph })}
/>
For anyone having the same issue using react, do the following after importing React and Trix:
import React, { Component } from 'react'
import Trix from "trix";
Trix.config.attachments.preview.caption.name = false //remove caption
Trix.config.attachments.preview.caption.size = false //remove caption size
Trix.config.textAttributes.textColour = {
styleProperty: "color",
inheritable: true,
} //set config for custom colors
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.