I already installed react-animate-on-scroll and animate.css i also tried Rotate component. I want to render animated text in col-3 how can achive this
import React , { Component } from 'react';
import ReactDOM from 'react-dom';
import ScrollAnimation from 'react-animate-on-scroll';
const Animation = () => (
<ScrollAnimation animateBounce="bounceIn">
<p>Text bounces in on scroll</p>
</ScrollAnimation>
)
ReactDOM.render( <Animation />, document.getElementById("col-3"));
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<body>
<div class="row">
<div class="col-1">
</div>
<div class="col-2">
</div>
<div id="col-3">
</div>
</div>
</body>
</html>
<ScrollAnimation animateIn="rotateIn" offset={800}>
<h1>Rotating!</h1>
</ScrollAnimation>
offset is optional, it just doesn't animate if you open the page and the animation element is not below the offset from the bottom of the page (which is 150 pixels by default).
You can see the full version on https://codesandbox.io/s/optimistic-hugle-h2fh5?file=/src/Animation.js
Related
Before, when i don't import materialize
it's ok
not import materialize
After, when i imported materialize in index.js it broke my page like this
the page have a container grid 12 column but i don't know how it do that, i just import not do any thing to want to have grid 12 column
import materialize.
i hope every one can explain for me in this case :((
-- I have classname coinciding with Materialui, it is "container"--
return (
<div className="container">
{data.map(player => (
<div className="column" key={player.id}>
<div className="card">
<img src={player.img}></img>
<h3>{player.name}</h3>
<p className="title">{player.club}</p>
<Link to={`detail/${player.id}`}>
<p><button>Detail</button></p>
</Link>
</div>
</div>
))}
</div>
)
We can see that the container of Material UI is active
--After changing its name, it worked as I expected.--
return (
<div className="player__list">
{data.map(player => (
<div className="column" key={player.id}>
<div className="card">
<img src={player.img}></img>
<h3>{player.name}</h3>
<p className="title">{player.club}</p>
<Link to={`detail/${player.id}`}>
<p><button>Detail</button></p>
</Link>
</div>
</div>
))}
</div>
)
After I changed the name "container" it was active
What I want
is to have a Breadcrumb component rendered in the __layout.svelte and using a writable store $breadcrumb to read the data to display. The $breadcrumb data is filled in every route.svelte file with data provided by a loader
The problem
When the page is served (yarn dev) or rendered (yarn build with adapter-static) the breadcrumb has the data from another route and then gets updated when the page is rehydrated. Basically, it looks like the Breadcrumb.svelte component is rendered before the data is loaded in the view hence using the old store value from the previous page.
Rendering the Breadcrumb component from every single route fixes the issue but I would like to keep it in the __layout file.
Any idea on what to do ?
The code
__layout.svelte
<script>
import Breadcrumb from '../components/Breadcrumb.svelte'
</script>
<div class="wrap">
<MainMenu />
<div class="container">
<Breadcrumb />
<slot />
</div>
...
store.js
import { writable } from 'svelte/store';
export const breadcrumb = writable({});
components/Breadcrumb.svelte
<script>
import { breadcrumb } from '$lib/store';
</script>
{#if Object.keys($breadcrumb).length}
<ul class="breadcrumb noprn">
<li>Accueil</li>
{#each Object.entries($breadcrumb) as [label, url] (label)}
<li>
{#if url}
<a href={url}>{label}</a>
{:else}
<h1>{label}</h1>
{/if}
</li>
{/each}
</ul>
{/if}
routes/product/[id].svelte
<script>
export let reference; // << the data comes in here
let product = reference.product;
import { breadcrumb } from '$lib/store';
$breadcrumb = {
Catalogue: '/catalogue',
[reference.category.name]: `/catalogue/${reference.category.slug}`,
[reference.brand.name]: `/catalogue/brands/${reference.brand.id}`,
[product.name]: null
}
</script>
...
I have a simple site structure using Gatsby.
In my index.js page, which is my homepage, I have the following code.
<Layout>
<div className="heroContainer" onMouseEnter={console.log('enter')}>
<div className="greetingContainer">
<h1>Hi</h1>
</div>
<div className="selfieContainer">
<StaticImage className="selfie" src="../images/{path}_Selfie.png" alt="Joshua Aggas selfie" ></StaticImage>
</div>
<div className="shortDescriptionContainer">
<img src={theAnyKey} alt="is it working" />
</div>
</div>
<div className="postContainer">
<div className="postContainerHeadings">
<p>Latest</p>
</div>
<div className="postListing">
{Posts}
</div>
</div>
</Layout>
I'm importing the any key gif but I just keep seeing the alt text.
I'm following this official documentation which states not to use the static image component. https://www.gatsbyjs.com/docs/how-to/images-and-media/working-with-gifs/
Here is my import statement at the top of the file.
import { theAnyKey } from "../images/theAnyKey.gif"
I'm not getting any 404 so I know it's sourcing the file correctly. What am I doing wrong?
Use default import instead of named:
import theAnyKey from "../images/theAnyKey.gif"
Then:
<img src={theAnyKey} alt="is it working" />
I've just started learning about reactjs and bulma.css. I'm trying to make a <footer> to stick to the bottom of the page using bulma's flexbox since I want to avoid writing my own css rules.
I already installed bulma using npm and imported bulma.css in the index.js like this
import "bulma/css/bulma.css";
but my code below still makes the <footer> to stick under the header..
<div className='container'>
<header className='has-text-centered'>
<h1>My Store</h1>
</header>
<div>
<h2>Dashboard Title</h2>
</div>
<footer className="has-text-centered is-flex-align-items-flex-end">
<small>
<span>Copyright #2022</span>
<br />
</small>
About
</footer>
</div>
The straightforward-bulma way would look something like:
Make sure the body and html are the full page height
Since this is every project-dependent, I've used the classic body { height: 100vh; } for now
The same for the container, it needs to be enlarged. Using the is-fullheight from the hero elements can be used (note: Consider using a hero instead of the container)
Give the footer a mt-auto which is short for margin-top: auto. This will force the footer to stick to the bottom of the page
html, body { height: 100vh; }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css">
<div class='container hero is-fullheight'>
<header class='has-text-centered'>
<h1>My Store</h1>
</header>
<div>
<h2>Dashboard Title</h2>
</div>
<footer class="has-text-centered is-flex-align-items-flex-end mt-auto">
<small>
<span>Copyright #2022</span>
<br />
</small>
About
</footer>
</div>
I'm new to React and Bootstrap. I'm using Bootstrap 5.1.
I'm trying to create a Navbar with my logo in it. No matter what I try, I can't get the image to display. Here is my Navbar.js
import React from 'react';
function Navbar() {
return (
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="House" src="/img/logo.svg" width="30" height="30"/>
</a>
</div>
</div>
</nav>
)
}
export default Navbar
The path to the logo is here, '/react-app/src/img/logo.svg' and I've tried pathing it multiple different ways without success.
And here is what I see.
What am I missing?
You need to use import to load the path like this:
import houseImgPath from './img/logo2.png' // replace with your own path
and then use it in your img src
<img alt="House" src={houseImgPath} width="30" height="30"/>
You should keep your image somewhere inside the src as you are doing (contrary to other suggestions) and import it like a module. The only time you might use the public folder is (maybe) if you wanted to preload the image or use the image as an icon for the app.
import React from 'react';
import img from './img/image.jpg' // or '../path/relative/to/component/image.jpg'
function Navbar() {
return (
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="House" src={img} width="30" height="30"/>
</a>
</div>
</div>
</nav>
)
}
export default Navbar
You need to import the image for example:
import imageName from './img/logo2.png';
<img alt="House" src={imageName} width="30" height="30"/>
you need to put images in public folder in order to get this path img/logo2.png try it please and let me know