I'm pretty new to React and getting this error when trying to use a https://getuikit.com/docs/card uikit card as a component.
Removing the attribute completely ruins the structure of the cards.
import React from 'react';
import faker from 'faker';
import "./css/Cards.css";
const Cards = (props) => {
return (
<div className="uk-card uk-card-default uk-width-1-2#m">
<div className="uk-card-header">
<div className="uk-grid-small uk-flex-middle" uk-grid>
<div className="uk-width-auto">
<img className="uk-border-circle" width="40" height="40" src={faker.image.animals} />>
</div>
<div className="uk-width-expand">
<h3 className="uk-card-title uk-margin-remove-bottom">Title</h3>
<p className="uk-text-meta uk-margin-remove-top"></p>
</div>
</div>
</div>
<div className="uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
<div className="uk-card-footer">
Read more
</div>
</div>
)
}
export default Cards;
Thanks in advance!
According to the docs at https://getuikit.com/docs/javascript#component-usage when using with React you must prefix the attributes with data-.
So, instead of:
<div className="uk-grid-small uk-flex-middle" uk-grid>
Try:
<div className="uk-grid-small uk-flex-middle" data-uk-grid>
Related
I'm experimenting building a Next13 app. The new layout is cool, but it is messing up the rendering. I don't entirely understand the ordering of rending objects within the layout:
Navbar.tsx
"use client";
import Link from "next/link";
export default () => {
return (
<span className="flex justify-between">
<h1 className="text-xl">Navigation Bar</h1>
<ul className="flex gap-4">
<li>
<Link href="/">Home</Link>
</li>
<li>
<Link href="/user/login">Login</Link>
</li>
<li>
<Link href="/user/signup">Sign Up</Link>
</li>
</ul>
</span>
);
};
layout.tsx
import "./globals.css";
import NavBar from "./NavBar";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html className="bg-slate-500 font-robslab" lang="en">
<head>
<title>Stylitique</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</head>
<header>
<NavBar />
</header>
<body>{children}</body>
</html>
);
}
page.tsx (HOME)
export default function Home() {
return (
<main>
<h1 className="text-green-500">HOME</h1>
<p>
{" "}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
sapiente, expedita praesentium a eligendi dolorem maiores nihil
consectetur ipsum, repudiandae sed deserunt delectus, facere repellat
ipsam sit possimus voluptatibus error!
</p>
</main>
);
}
I tried:
putting the NavBar into a header outside the body.
putting it straight into the body.
with and without "use client".
added more data to "HOME" in order to render slower, I guess.
Anyone find a solution yet?
just put the component inside <body>
notice: no need of <header>
<head>
...
</head>
<body>
<NavBar />
{children}
</body>
I'm building a slider with React and framer motion. My idea is to subtract scrollWidth with offsetWidth to get the remaining width of the element.
I always get the value of zero (somehow they are equal). I printed the object and I saw that scrollWidth value returns clientWidth instead.
In the object the value of scrollWidth is totaly different and I cant tell why.
I am Creating This Same Project Carousel Slider In Next.js
But I got scrollWidth is Undefined
I dont Know What Happend But..
I got scrollWidth is undefined
enter image description here
import React, { useEffect, useRef, useState } from 'react'
import { motion } from 'framer-motion';
import cardsUser from '../pages/CardsUsers'
const CardCaousel = () => {
const [width,setWidth] = useState(0)
const carousel = useRef()
useEffect(()=>{
setWidth(carousel.current.scrollWidth - carousel.current.offsetWidth)
},[])
return (
<div className="container max-w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-5 bggradient">
<div className="liveactionscontainer mt-20">
<h1 className='text-center text-white font-extralight text-6xl mt-2 mb-3'>Live Actions </h1>
<p className='font-extralight text-gray-500 text-center'>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis, suscipit repellat
<br/>
inventore dolor quia quos molestias quae vitae? Eveniet nobis, laborum voluptas culpa libero similique.</p>
<div className="myflex flex justify-center" data-aos="fade-right">
<motion.div className="carousel">
<motion.div
drag="X"
dragConstraints={{right:0,left:-width}}
className="inner-carousel"
>
{cardsUser.map((e)=>{
return (
<motion.div className='item' key={e}>
<div className="mycolumn mb-10">
<div class="nft">
<div class='main'>
<img class='tokenImage' src={e.Imgsrc} alt="NFT" />
<h2>{e.name}</h2>
<p class='description'>Lorem, ipsum dolor sit amet consectetur adipisicing elit. </p>
<div class='tokenInfo'>
<div class="price">
<ins>◘</ins>
<p>0.031 ETH</p>
</div>
<div class="duration">
<button>Place bid</button>
</div>
</div>
<hr />
<div class='creator'>
<div class='wrapper'>
<img src={e.profileImg} alt="Creator" />
</div>
<p><ins>Creation of</ins><span className='text-white'> NF</span> </p>
</div>
</div>
</div>
</div>
</motion.div>
);})}
</motion.div>
</motion.div>
</div>
</div>
</div>
)
}
export default CardCaousel
I got issue when trying to add a "screen" prefix to grid-column, the layout is perfect but when I add md: to grid-col-span-6 everything is messed up.
this is the code :
import React from "react";
import app from "../images/app.png";
const Featured = () => {
return (
<div className="mt-52 ">
<h1 className="text-primary-dark-theme text-5xl mt-14">Projects</h1>
<div className="grid grid-cols-12 grid-rows-1 mt-20 ">
<div className="row-start-1 row-span-1 col-start-1 md:col-span-6">
<img src={app} alt="" className="w-full" />
</div>
<div className="row-start-1 row-span-1 col-start-6 col-span-7">
<div className="h-full w-full">
<h1 className="text-right text-primary-dark-theme">
Featured Project
</h1>
<h1 className="text-right text-gray-300 font-bold ">Title</h1>
<p className="p-5 bg-gray-800 text-gray-400 shadow-lg rounded-md mt-5">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio id
doloribus sequi repellendus aperiam dolore!
</p>
</div>
</div>
</div>
</div>
);
};
export default Featured;
This is how the ui looks in md
this is the result i want to have
this what happened when i add md predix to col-span-6
The issue seems to be that when applying the responsive md:col-span-6 it also overrides col-start-1 (you can see the styles no longer applied in the dev tools). Adding md:col-start-1 seems to fix this behaviour.
However, simply changing your image's wrapper <div /> to:
<div class="row-start-1 row-span-1 col-start-1 col-span-12">
Seems to have the desired result.
First of all, there is a similar question to this one. I intentionally chose a similar title but this question is slightly different.
I have some server side rendered React code. It gives me HTML something like this:
<main>
<article>
<h2>Lorem ipsum</h2>
<p>dolor sit amet</p>
</article>
<article>
<h2>Lorem ipsum</h2>
<p>dolor sit amet</p>
</article>
<article>
<h2>Lorem ipsum</h2>
<p>dolor sit amet</p>
</article>
</main>
I am currently implementing partial hydration, ie. instead of having one big React app on my page that mounts at some root element, I am only hydrating parts of the page with their corresponding components.
That means I have an <Article> component like this
function Article() => (
<article>
<h2>Lorem ipsum</h2>
<p>dolor sit amet</p>
</article>
)
That I am mounting at the first article, ie.
const container = document.querySelector('main > article:first-child');
ReactDOM.hydrate(<Article />, container);
I was hoping that would hydrate the first <article> element and leave the rest alone, which works, except of using and hydrating the <article> element ReactDOM actually mounts inside the <Article /> inside the DOM element resulting in this HTML:
<main>
<article>
<article>
<h2>Lorem ipsum</h2>
<p>dolor sit amet</p>
</article>
</article>
^ -- <article> inside <article>, not cool
<article>
<h2>Lorem ipsum</h2>
<p>dolor sit amet</p>
</article>
<article>
<h2>Lorem ipsum</h2>
<p>dolor sit amet</p>
</article>
</main>
Now I am wondering if there is any way I can make ReactDOM use that container instead of inserting into it.
I'm implementing a content tabbed section using Bootstrap 3 and it works fine for almost all resolutions except mobile. For some reason only on mobile devices the default active tab is the last one called "All", but the content it displays comes from the first tab ("Popular").
It works perfect on bigger resolutions like iPad or desktop. In this case the default active tab is the first one called "Popular" and the displayed content is correct.
Could you please help me to figure it out what is the problem?
<section class="solution-tabs section-tabs">
<div class="container no-padding">
<ul class="nav nav-tabs" role="tablist">
<li class="col-sm-3 active">Popular</li>
<li class="col-sm-3">Industries</li>
<li class="col-sm-3">Topics</li>
<li class="col-sm-3">All</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade in active" id="tabPopular">
<div class="container">
<div class="row">
Popular tab content<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, est quae quo magnam deserunt facere!
</div>
</div>
</div>
<div class="tab-pane fade" id="tabIndustries">
<div class="container">
<div class="row">
Industries tab content<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, corporis obcaecati eos vero aliquam sit?
</div>
</div>
</div>
<div class="tab-pane fade" id="tabTopics">
<div class="container">
Topics tab content<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus ratione iusto officiis sint quaerat totam.
</div>
</div>
<div class="tab-pane fade" id="tabAll">
<div class="container">
<div class="row">
All tab content<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, fugit fuga doloremque minima ducimus ratione.
</div>
</div>
</div>
</div>
</section>