I saw another question about installing tailwind elements in nextjs project.
How to install the tailwind elements in nextjs?
I followed it on my react project.It doesn't work. How can use tailwind elements in react project?
import React, { useEffect } from "react";
// import "tw-elements";
const Stepper = () => {
useEffect(() => {
const use = async () => {
await import("tw-elements");
};
use();
}, []);
return (
<>
<ul
className="stepper"
data-mdb-stepper="stepper"
data-mdb-stepper-type="vertical"
>
<li className="stepper-step stepper-active">
<div className="stepper-head">
<span className="stepper-head-icon"> 1 </span>
<span className="stepper-head-text"> step1 </span>
</div>
<div className="stepper-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</li>
<li className="stepper-step">
<div className="stepper-head">
<span className="stepper-head-icon"> 2 </span>
<span className="stepper-head-text"> step2 </span>
</div>
<div className="stepper-content">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li className="stepper-step">
<div className="stepper-head">
<span className="stepper-head-icon"> 3 </span>
<span className="stepper-head-text"> step3 </span>
</div>
<div className="stepper-content">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</div>
</li>
</ul>
</>
);
};
tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
"./node_modules/tw-elements/dist/js/**/*.js",
],
theme: {
extend: {},
},
plugins: [require("tw-elements/dist/plugin")],
};
The code above is what i write to stepper. It work sometime, but sometime it doesn't . stepper-content is never hided or never showed. Am i did something wrong? Thank you
As stated in this link, you should import tw-elements in a useEffect in the _app file, not in the same component that you use them in.
/_app.jsx/tsx
function MyApp({ Component, pageProps }: AppProps) {
useEffect(() => {
const use = async () => {
(await import('tw-elements')).default;
};
use();
}, []);
return <Component {...pageProps} />;
}
export default MyApp;
There is also another solution to use the _document.js file and Script element to use the script for tw_elements
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'
// import 'tw-elements';
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
<Script src="./TW-ELEMENTS-PATH/dist/js/index.min.js"/>
</body>
</Html>
)
}
but I don't recommend it as _document.js will be replaced soon in the upcoming updates for NextJS
Related
I am importing an SVG element using the ReactComponent method as below:
import { ReactComponent as Height } from "../../assets/Height.svg";
import { ReactComponent as Closet } from "../../assets/Closet.svg";
import { ReactComponent as Shirt } from "../../assets/Shirt.svg";
When I render them on the screen like this:
<Height />
<Shirt />
<Closet />
It shows the first Icon for all the three renders, for example, for the above code it renders the Height SVG element for all of them.
Here is the full component:
import React from "react";
import styles from "./Features.module.css";
import featureImage from "../../assets/featureImage.png";
import { ReactComponent as Height } from "../../assets/Height.svg";
import { ReactComponent as Closet } from "../../assets/Closet.svg";
import { ReactComponent as Shirt } from "../../assets/Shirt.svg";
import FeatureBackground from "../../assets/FeatureBackground.png";
const Features = () => {
const bodyContent = [
{
icon: <Height />,
title: "Body measurement tracking",
body: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi ",
},
{
icon: <Closet />,
title: "In home trial of clothes and closet",
body: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi ",
},
{
icon: <Shirt />,
title: "Recommendation of clothes using AI",
body: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi ",
},
];
return (
<div className={styles.container}>
<div className={styles.mainSection}>
<div className={styles.images}>
<img
className={styles.featureBackground}
src={FeatureBackground}
alt="feature background"
/>
<img
className={styles.featureImage}
src={featureImage}
alt="features Image"
/>
</div>
<div className={styles.content}>
<h1>EVERYTHING YOU NEED!</h1>
<div className={styles.body}>
{bodyContent.map((content, i) => (
<div key={i} className={styles.bodyContent}>
<div className={styles.icon}> {content.icon} </div>
<div>
<h3>{content.title}</h3>
<p>{content.body}</p>
</div>
</div>
))}
</div>
</div>
</div>
<div className={styles.footerSection}>
<h2>
Enhance your shopping experience with elevated expertise and efficient
time constraints.
</h2>
</div>
</div>
);
};
export default Features;
Suppose this example with two articles (full example here https://github.com/codebushi/nextjs-starter-dimension/blob/master/components/Main.js)
import PropTypes from 'prop-types';
class Main extends React.Component {
render() {
let close = <div className="close" onClick={() => {this.props.onCloseArticle()}}></div>
return (
<div id="main" style={this.props.timeout ? {display: 'flex'} : {display: 'none'}}>
<article id="intro" className={`${this.props.article === 'intro' ? 'active' : ''} ${this.props.articleTimeout ? 'timeout' : ''}`} style={{display:'none'}}>
<h2 className="major">Intro</h2>
<span className="image main"><img src="/static/images/pic01.jpg" alt="" /></span>
<p>Nam maximus erat id euismod egestas. By the way, check out my awesome work.</p>
{close}
</article>
<article id="work" className={`${this.props.article === 'work' ? 'active' : ''} ${this.props.articleTimeout ? 'timeout' : ''}`} style={{display:'none'}}>
<h2 className="major">Work</h2>
<span className="image main"><img src="/static/images/pic02.jpg" alt="" /></span>
<p>Adipiscing magna sed dolor elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus ultrices.</p>
{close}
</article>
</div>
)
}
}
Main.propTypes = {
route: PropTypes.object,
article: PropTypes.string,
articleTimeout: PropTypes.bool,
onCloseArticle: PropTypes.func,
timeout: PropTypes.bool
}
export default Main
How do I create a link in the intro article to open the work article? In the example there's an <a href='#work'>, but when I click it there's no action at all.
You can do it by importing 'Link' from Next.js:
import Link from "next/link";
Then you can add:
<Link href="work">
<a>Go To Work!</a>
</Link>
Full documentation from Next.js: https://nextjs.org/docs/api-reference/next/link
So basically what I am trying to do here is set the toggle state for my modal and then toggle the module on and off via the alert and that should work fine hopefully. However for some reason I am getting the error "Your render method should have a return statement" when I do have a return statement. Does anyone know what could be causing this?
import React, { Component, useState } from "react";
import { Button, Alert, Input, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import ViewEmail from "./viewEmail";
class SingleEmail extends Component {
render() {
const ModalExample = (props) => {
const { buttonLabel, className } = props;
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
return (
<>
<div>
<Modal isOpen={modal} toggle={toggle} className={className}>
<ModalHeader toggle={toggle}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={toggle}>
Do Something
</Button>{" "}
<Button color="secondary" onClick={toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
<Alert
onClick={toggle}
className="SingleEmail"
style={{
backgroundColor: "white",
border: "1px solid lightgray",
color: "black",
}}
>
<div className="CheckBox">
<Input addon type="checkbox" />
</div>
<div className="MarkImportant">
<i class="fas fa-star"></i>
</div>
<p className="EmailFrom">{this.props.From}</p>
<p className="EmailTitle">{this.props.Subject}</p>
<p className="EmailDate">{this.props.Date}</p>
</Alert>
</div>
</>
);
};
}
}
export default SingleEmail;
You do not have a return statement inside the SingleEmail component but inside the ModalExample component which you have defined inside the render method of SingleEmail.
If you wish to use the ModelExample layout as singleEmail component, you can simply export the same component like
const SingleEmail = (props) => {
const { buttonLabel, className } = props;
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
return (
<>
<div>
<Modal isOpen={modal} toggle={toggle} className={className}>
<ModalHeader toggle={toggle}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={toggle}>
Do Something
</Button>{" "}
<Button color="secondary" onClick={toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
<Alert
onClick={toggle}
className="SingleEmail"
style={{
backgroundColor: "white",
border: "1px solid lightgray",
color: "black",
}}
>
<div className="CheckBox">
<Input addon type="checkbox" />
</div>
<div className="MarkImportant">
<i class="fas fa-star"></i>
</div>
<p className="EmailFrom">{props.From}</p>
<p className="EmailTitle">{props.Subject}</p>
<p className="EmailDate">{props.Date}</p>
</Alert>
</div>
</>
);
};
export default SingleEmail;
you have no return in render function, you can return ModalExample and things will be fine;
like this:
class SingleEmail extends Component {
render() {
const ModalExample = (props) => {
const { buttonLabel, className } = props;
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
return (
<>
<div>
....
....
....
</div>
</>
);
};
return ModalExample;
}
}
I am trying to create new pages and display related data based on the article ID. But, I am running into issues. Right now I create a slug/id which brings up my article template and creates a link seen in the browser window.
I am not able to display any related data on those article pages. What I want is to find the ID of the page and show the information related to that ID. This is my configuration so far:
gatsby-node.js:
const path = require(`path`)
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions
const articleTemplate = path.resolve(`./src/templates/article.js`)
return graphql(`
{
umdHub {
articles {
data {
id
title
subtitle
body
summary
hero_image {
url_1200_630
}
authorship_date {
formatted_short
unix
unix_int
formatted_long
formatted_short
time
}
slug
}
}
}
}
`
).then(result => {
if (result.errors) {
throw result.errors
}
// Create blog post pages.
result.data.umdHub.articles.data.forEach(data => {
createPage({
path: `/articles/${data.slug}-${data.id}`,
component: articleTemplate,
id: data.id,
context: {
slug: `/articles/${data.slug}-${data.id}`
},
})
})
return;
})
}
Article template:
import React from 'react'
import { graphql } from 'gatsby'
import { ListGroup, ListGroupItem } from 'reactstrap';
// eslint-disable-next-line
import Layout from "../components/layout"
import Header from "../components/header"
import Footer from "../components/footer"
export default ({ data }) => {
console.log(data)
return (
<div>
<Header />
<div className="container spaces article">
<div className="row">
<section className="col-md-9">
<div className="tag-list">
<ul className="list-inline">
<li className="list-inline-item">Highlighted</li>
<li className="list-inline-item">Innovation</li>
<li className="list-inline-item">Web Only</li>
<li className="list-inline-item">February 28, 2019</li>
</ul>
</div>
<h1>hello</h1>
{data.umdHub.articles.data.map((article) => (
<div>
<h1>{article.title}</h1>
</div>
))}
<div className="row article-content">
<div className="col-md-10 offset-md-1">
<h2 className="subheader">Subtitle</h2>
<div className="author">
<p>By Jane Doe | Photos by ISTOCK</p>
<hr />
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</section>
<aside className="col-md-3">
<div>
<ListGroup flush>
<ListGroupItem disabled tag="a" href="#">Recent Posts</ListGroupItem>
<ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
<span>February 27, 2019</span>
<ListGroupItem tag="a" href="#">Morbi leo risus</ListGroupItem>
<span>February 27, 2019</span>
<ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
<span>February 27, 2019</span>
<ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
<span>February 27, 2019</span>
</ListGroup>
</div>
</aside>
</div>
</div>
<Footer />
</div>
)
}
export const query = graphql`
query($id:String!) {
umdHub {
articles(id: $id) {
data {
id
title
subtitle
body
summary
hero_image {
url_1200_630
}
}
}
}
}
`
gatsby-config.js:
plugins: [
{
resolve: `gatsby-source-graphql`,
options: {
typeName: `HUBAPI`,
fieldName: `umdHub`,
url: `https://umd-hub-middleware.herokuapp.com/graphql`,
},
},
...
I have a "edit" view where I need to display tabs to separate the different information needed. I found a site where it discusses the creation of a directive to catch the tab changing. This is my first directive and it is not working. When I click on the second tab, it takes me back to my default view. Not sure what I have implemented incorrectly.
Web Page -
<ul class="nav nav-tabs">
<li class="active"><a showTab="" href="#home">Home</a></li>
<li><a showTab="" href="#menu1">Menu 1</a></li>
<li><a showTab="" href="#menu2">Menu 2</a></li>
<li><a showTab="" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
The associated directive -
'use strict';
define(['app'], function (app) {
var injectParams = ['showtab'];
var wcTabDirective = function (showtab) {
return {
link: function (scope, element, attrs) {
element.click(function (e) {
e.preventDefault();
$(element).tabs('show');
});
}
}
};
wcTabDirective.$inject = injectParams;
app.directive('wcTab', wcTabDirective);
});
I have put a break point in the directive but it is never reached.
You haven't actually applied your "wc-tab" directive to any elements.
Try adding the directive to your tab anchor elements:
<a wc-tab showTab="" href="#menu1">Menu 1</a>
Check that the showTab attribute is correct as well. If it is a directive then it should be applied as show-tab="".