Using react-lottie version 1.2.3 to try animate in React web application.
It successfully compiled without any error message but the animation would not show from json file.
I have followed React Lottie not showing animation not showing (web) which suggested replace animationData: animationData to animationData: animationData.default. Have tried both however it did not work.
Any ideas?
import React,{Component} from 'react';
import Lottie from 'react-lottie';
import animationData from './lottie/lottie_page_not_found.json';
class PageNotFound extends Component {
render(){
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData.default,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice"
}
};
return(
<div>
<h1 style={{display: 'flex', justifyContent: 'center'}}>Page Not Found</h1>
<Lottie
options={defaultOptions}
height={400}
width={400}
/>
</div>
);
}
}
export default PageNotFound;
Related
I want to add react-slick by following it's documentation but "Unexpected token" keeps showing, i just want the react-slick work and styling it later.
I'm really sorry i know this is very basic but i've browsing long enough until i ended up here, i'm still learning on reactJS
This is my import
import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import {ServicesContainer,ServicesH1,ServicesWrapper,ServicesCard,ServicesIcon,ServicesH2,ServicesP} from './ServicesElements';
This is my code Planning to styling it later after its showing on the website i build
const Services = () => {
return (
<ServicesContainer id="ourproducts">
render() {
const settings = {
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
speed: 2000,
autoplaySpeed: 2000,
cssEase: "linear"
};
return (
<div>
<h2>Auto Play</h2>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
</Slider>
</div>
);
}
<ServicesH1>Our Products</ServicesH1>
<ServicesWrapper>
<ServicesCard>
<ServicesIcon img src={require('../../images/ikansidat.jpg').default}/>
<ServicesH2>Eel / Unagi / Ikan Sidat</ServicesH2>
<ServicesP></ServicesP>
</ServicesCard>
<ServicesCard>
<ServicesIcon img src={require('../../images/minyakkelapasawit.jpg').default}/>
<ServicesH2>Crude Palm Oil</ServicesH2>
<ServicesP></ServicesP>
</ServicesCard>
<ServicesCard>
<ServicesIcon img src={require('../../images/cocopeat.jpg').default}/>
<ServicesH2>Coco Peat</ServicesH2>
<ServicesP></ServicesP>
</ServicesCard>
</ServicesWrapper>
</ServicesContainer>
)
}
export default Services
My Home page sends data from my strapi cms to my PostSlider component via props
import React from "react";
import styles from './index.module.scss'
import { AxiosService } from '../utils/axios-service'
import PostSlider from '../components/postSlider/postSlider'
const Home = ({ posts }) => {
return (
<div id='contentsWrap' className={styles.dohandsWrap}>
<PostSlider home={true} posts={posts} />
</div>
)
}
export default Home
export async function getStaticProps() {
const axios = AxiosService.create()
const res = await axios.get('/archives', {
params: {
category: 'news',
display: true,
showDoson: true,
_limit: 5,
_sort: 'id:DESC'
}
})
return {
props: {
posts: res.data,
},
}
}
My postSlider component then maps over the data to fill my slider
import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import styles from './postSlider.module.scss'
import Link from 'next/link'
import Image from 'next/image'
export default function PostSlider({ home, posts }) {
var settings = {
infinite: posts.length > 2 ? true : false,
autoplay: false,
speed: 500,
autoplaySpeed: 3000,
slidesToShow: 3,
slidesToScroll: 1,
};
return (
<section className={`${styles.postSlider} postSlider ${home ? styles.postSliderHome : 'postSliderNotHome'} ${posts.length > 2 ? 'postSliderPadding' : ''}`}>
<Slider {...settings}>
{posts.map((post) => {
const date = new Date(post.displayDate);
return (
<Link key={post.id} href={`/news/${post.id}`}>
<a className={styles.postSliderLink}>
<article>
<Image src={post.images[0]?.url} alt={post.images[0]?.alternativeText} width={376} height={190} layout="fixed" />
</article>
</a>
</Link>
)
})}
</Slider>
</section>
);
}
I made sure to include my cdn address in module.exports in next.config.js but I get the following error
Error: Image is missing required "src" property. Make sure you pass
"src" in props to the next/image component. Received:
{"width":376,"height":190}
If I remove the next/image component for the normal img tag, everything works fine.
What am I doing wrong?
Well, it seems like one of your posts have empty images array?
Image component is required to have src property and you pass undefined instead.
You can check if there is at least one image and then render it, like that:
<article>
{post.images.length > 0 && (
<Image src={post.images[0].url} alt={post.images[0].alternativeText} width={376} height={190} layout="fixed" />
)}
</article>
Try before the return:
const src = {src: post.images[0]?.url}
Then inside the return:
<Image {...src} //etc...
Sometimes, the <Image /> tag doesn't work like it should and doesn't accept the src . Try defining the URL before return and then pass the URL in the src property.
Just before return:
const url = post.images[0]?.url;
And then you can add:
<Image src={url} alt={post.images[0]?.alternativeText} width={376} height={190} layout="fixed" />
I'm trying to render a loading notification modal while a POST is processing.
It seems like it should be very simple using createPortal but the modal never displays.
I added a div in index with an id of modal:
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<div id="modal"></div>
</body>
Here is the react component. When the test button is clicked the state of showModal is set to true:
import React, { Component, Header } from 'react';
import { render } from "react-dom";
import { Row, Col, Button } from 'reactstrap'
import 'bootstrap/dist/css/bootstrap.css';
import ProcessingModal from '../Modals/ProcessingModal';
export class TestModal extends React.Component {
constructor(props) {
this.state = {
showModal: false,
}
this.handleShowModal = this.handleShowModal.bind(this);
}
handleShowModal() {
this.setState({ showModal: true });
}
render() {
return (
<div>
<div className='container-fluid'>
<h2 style={{ textAlign: 'center', border: 'none' }}>
Header Text
</h2>
<br />
{this.state.showModal ? <ProcessingModal /> : null }
<Row>
<Col md={6}>
<Button onClick={this.handleShowModal} type="button">test</Button>
</Col>
</Row>
</div>
</div>
);
}
This is the ProcessingModal js:
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
const ModalContent = (
<div className='modal text-center'>
<div className="spinner-border text-success"><br />
Loading...
</div>
</div>
);
function ProcessingModal(props) {
return ReactDOM.createPortal(ModalContent, document.querySelector("#modal"));
}
export default ProcessingModal;
Where am i going wrong?
I think first argument of createPortal expect a React Element, not React Component.
In ProcessingModal.js, wrap ModalContent into JSX Element:
return ReactDOM.createPortal(<ModalContent/>, document.querySelector("#modal"))
Styling was my issue. The modal style had display: none;
Once that was removed it worked.
How can I embed a Typeform form in my React app?
The embed code that Typeform provide doesn't compile in JSX.
This is a sample of the embed code:
<div class="typeform-widget" data-url="https://sample.typeform.com/to/32423" style="width: 100%; height: 500px;"></div> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script> <div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;"> powered by Typeform </div>
You can use a React wrapper component I created: https://github.com/alexgarces/react-typeform-embed
It uses the official Typeform Embed SDK under the hood. Basically you have to pass your form url, but it also supports other SDK options.
import React from 'react';
import { ReactTypeformEmbed } from 'react-typeform-embed';
class App extends React.Component {
render() {
return <ReactTypeformEmbed url="https://demo.typeform.com/to/njdbt5" />;
}
}
You can view Typeform documentation for embedding with JavaScript here.
And their official npm module here.
Use React refs to trigger initialisation similarly to how you would initialise a jQuery plugin for instance.
import React from 'react';
import * as typeformEmbed from '#typeform/embed'
class Form extends React.Component {
constructor(props) {
super(props);
this.el = null;
}
componentDidMount() {
if (this.el) {
typeformEmbed.makeWidget(this.el, "https://sample.typeform.com/to/32423", {
hideFooter: true,
hideHeaders: true,
opacity: 0
});
}
}
render() {
return (
<div ref={(el) => this.el = el} style={{width: '100%', height: '300px'}} />
)
}
}
export default Form;
Inspired by Elise Chant's solution and using function based components, hooks and Typescript, this is what I come up with for my project. I did not want to install another thin wrapper on top of the official SDK.
import * as typeformEmbed from '#typeform/embed';
import React, { useEffect, useRef } from 'react';
interface EmbeddedTypeformProps {
link: string;
hideFooter?: boolean;
hideHeaders?: boolean;
opacity?: number;
}
export const EmbeddedTypeform: React.FunctionComponent<EmbeddedTypeformProps> = ({
link,
hideFooter = true,
hideHeaders = true,
opacity = 90,
}) => {
const elementRef = useRef(null);
useEffect(() => {
typeformEmbed.makeWidget(elementRef.current, link, {
hideFooter,
hideHeaders,
opacity,
});
}, [link]);
return (
<div
ref={elementRef}
style={{ width: '100%', height: '100%', flex: '1 1 auto' }}
/>
);
};
If you are using Typescript with react and you got this error just make sure that noImplicitAny set to false in tsconfig file :
"noImplicitAny": false,
I am new to React JS. I have tried to use owl carousel in React.
The package link I installed from npm is
https://www.npmjs.com/package/react-owl-carousel
As instructed I have imported Owl Carousel component on specific page. Here is the code:
import React, { Component } from 'react';
import {Grid, Row, Col , ProgressBar } from 'react-bootstrap';
import UserAvtar from '../common/UserAvtar.js';
import SectionHeaderOfCards from '../common/SectionHeaderOfCards.js';
import OwlCarousel from 'react-owl-carousel';
const options = {
items: 4,
};
class DashboardPage extends Component {
render() {
return (
<div>
<section className="has-small__padding has-grey__bg">
<UserAvtar />
</section>
<section className="has-small__padding">
<Grid>
<SectionHeaderOfCards title="Recommended Matches" />
<OwlCarousel margin={10} >
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
</OwlCarousel>
</Grid>
</section>
</div>
);
}
}
export default DashboardPage;
As default This code outputs 3 items at a time (As 3 is the default value in owl carousel) . I thought of I may initialised the value with 4 , hence tried ,
const options = {
items: 4,
};
But it's not working. There is nothing mentioned in its node package either. Anyone knows how to use owl carousel options in React Owl carousel ?
Apart I want to show 3 items for devices between 768px to 1200px , 2 items between 500px to 767px and 1 item for the devices below 499px.
Here is how normal owl carousel use the option to add responsiveness. https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html
How to achieve the same in React owl carousel ?
You need to add options object to OwlCarousel component.
Example:
<OwlCarousel margin={10} items={4} >
//...
</OwlCarouse>
OR
<OwlCarousel margin={10} {...options} >
//...
</OwlCarouse>
Best you can use:
render() {
const options = {
items: 1,
nav: true,
navText:["<div className='nav-btn prev-slide'></div>","<div className='nav-btn next-slide'></div>"],
rewind: true,
autoplay: true,
slideBy: 1,
dots: true,
dotsEach: true,
dotData: true
};
return (
<OwlCarousel ref="gallery" options={options}>
...
</OwlCarousel>
)