We Keep Coding

how to write mdx story for the image react component?

I've simple react component, however I need to have a story for this one as well. Could you please help in writing it?
I have the sample one and I am not sure how to pass the component inside it.
So far I have those:
component:
import { string, urlPropType } from "prop-types"
import * as Styled from "./Image.styled"
import image from "./components/image/cutedog.jpg"
const Image = ({ src, alt }) => (
<Styled.Image>
<img src={image} alt={dog} />
</Styled.Image>
)
Image.propTypes = {
src: urlPropType.isRequired,
alt: string.isRequired,
}
export default Image
Story:
import { Meta, Canvas, Story, ArgsTable } from "#storybook/addon-docs"
import Image from "../Image"
<Meta title="Components/Image" component={Image} />
# Image
<Canvas>
<Story
name="Overview"
args={{
name: "arrowDown",
size: "medium",
}}
>
{Template.bind()}
</Story>
</Canvas>
<ArgsTable />
export const Template = (args) => <Image {...args} />

react-slideshow-image package not loading images from google drive

I've been trying for two days to make heads or tails of the react-slideshow-image package. I've installed all the missing dependencies by hand, I tried moving the images folder around (anything outside of src threw an error immediately though...), and I also tried uploading my images to an external google drive and substituting their links for the ones given in the example. I've disabled all other components inside the App.js.
Bottom line: the package only works if I use the image links provided in the example. No other images are ever detected.
Here is my code (copied and pasted from the example):
import { Fade } from "react-slideshow-image";
import "react-slideshow-image/dist/styles.css";
// import images from "./images/homepage";
const fadeImages = [
"https://drive.google.com/file/d/1zAkmE3ZoXgYRjhylfRHCZKUJkUakCrfZ/view?usp=sharing",
"https://drive.google.com/file/d/11Gz-fVv4hiKnfHgEPoLPZ02PlNQY3EYP/view?usp=sharing",
"https://drive.google.com/file/d/1B7WAX020SBZ1Bdq9TpC1ps0-XsdIJwWN/view?usp=sharing"
// "https://images.unsplash.com/photo-1506710507565-203b9f24669b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1536&q=80",
// "https://images.unsplash.com/photo-1536987333706-fc9adfb10d91?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"
];
export default function App() {
return (
<div className="slide-container">
<Fade>
<div className="each-fade">
<img src={fadeImages[0]} alt="" />
</div>
<div className="each-fade">
<img src={fadeImages[1]} alt="" />
</div>
<div className="each-fade">
<img src={fadeImages[2]} alt=""/>
</div>
</Fade>
</div>
);
}
Original unspalsh image links have been commented out to see if my links work, but they don't. Using images other than the ones provided seems to crash the slider entirely.
screenshot of live server view of my webstie
App.js is rendered correctly, console does not log a sinle glitch.
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// import reportWebVitals from './reportWebVitals';
// import Carousel from "./components/main/Carousel.js";
// const divStyle = {
// position: "absolute"
// }
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById('root')
);
What am I doing wrong?

You need to store the images ids and use a different path to get the image url https://drive.google.com/uc?id="<file-id>:
const fadeImages = [
"1zAkmE3ZoXgYRjhylfRHCZKUJkUakCrfZ",
"11Gz-fVv4hiKnfHgEPoLPZ02PlNQY3EYP",
"1B7WAX020SBZ1Bdq9TpC1ps0-XsdIJwWN"
];
const PATH = "https://drive.google.com/uc?id=";
then:
export default function App() {
return (
<div className="slide-container">
<Fade>
{fadeImages.map(src => (
<div className="each-fade">
<img src={`PATH${src}`} alt="" />
</div> ))
}
</Fade>
</div>
);
}

How to present a blurred version of an image in NextJS as it's being downloaded?

I'm looking for a similar effect as this one below:
I have done something similar with Gatsby, but I'm wondering if this is possible to do with NextJS?

For version above 10.2 Nextjs is providing built in blur image in Image component.
After spending hours I found this article
First you need to update your nextJs app to 10.2.4 or above version.
yarn add next#10.2.4
Then implement your nextJs Image component with two addtional props blurDataURL and placeholder. Check the code example below.
<Image
className="image-container"
src="/images/high-quality-image.jpg"
width={250}
height={240}
quality={75}
blurDataURL="/images/path-to-blur-image.jpg"
placeholder="blur"
/>
Next.js Update:
Next.js now support placeholder="blur" you can use it in the image component:
<Image src={author} alt="Picture of the author" placeholder="blur" />

You can do it without using an external library with not much code.
https://codepen.io/darajava/pen/GRZzpbB?editors=0110
I added animations in there too on load. The image will fit to the width of its parent container. Usage is simple:
<LoadImage largeImageSrc={url} smallImageSrc={url} />

With Next.js v11, this is supported internally:
import Image from 'next/image';
import someImg from 'path/to/some/image.png';
// ...
<Image src={someImg} placeholder="blur" />
References:
https://nextjs.org/blog/next-11#image-placeholders
https://nextjs.org/docs/api-reference/next/image#placeholder
Also, this issue discussed a whole lot of alternatives, which can be helpful if you are using lower versions or trying to use this with non-static images.
Official demo: https://image-component.nextjs.gallery/placeholder
The example can be animated if you want: (related)
import Image from 'next/image';
import { useState } from 'react';
import ViewSource from '../components/view-source';
import mountains from '../public/mountains.jpg';
const PlaceholderBlur = () => {
const [loaded, setLoaded] = useState(false);
return (
<>
<ViewSource pathname="pages/placeholder.js" />
<h1>Image Component With Placeholder Blur</h1>
<Image
alt="Mountains"
src={mountains}
placeholder="blur"
width={700}
height={475}
className={loaded ? 'unblur' : ''}
onLoadingComplete={() => setLoaded(true)}
/>
<style jsx global>{`
.unblur {
animation: unblur 1s linear;
}
#keyframes unblur {
from {
filter: blur(20px);
}
to {
filter: blur(0);
}
}
`}</style>
</>
);
};
export default PlaceholderBlur;
Result:
How does this compare with other options??
You get to keep using the awesome next/image instead of unoptimized img tag or not-so-optimized third-party implementations.
No need to add additional dependencies, i.e. bundle size won't be effected much.
No need to manually generate a tiny image to show as preview. Next.js automatically generates a very small (<10px) image for you.

import Image from 'next/image';
import imageUrlBuilder from '#sanity/image-url';
import sanity from '../../utils/sanity';
export function urlFor(source) {
return imageUrlBuilder(sanity).image(source);
}
const SanityImage = ({ src, width, height, alt, ...props }) => (
<Image
src={urlFor(src).width(width).height(height).url()}
width={width}
height={height}
layout="responsive"
placeholder="blur"
alt={alt || 'kickoff'}
blurDataURL="/images/coverImage.png"
{...props}
/>
);
export default SanityImage;

Using require for SVG files in React Native

Im using react-native-svg and I'm fully aware of their way to use local svg files as shown here.
What I would like to know is if there is a way to use require for svg file paths. e.g.
<Svg width={50} height={50} fill={"#CCC"} source={require("./path/to/file.svg")} />
That way I would be able to store the require in a variable and use it like:
const myImage = require("./path/to/file.svg")
<Svg width={50} height={50} fill={"#CCC"} source={myImage} />
Any ideias?
EDIT FOR MORE DETAIL
Im developing a white label app so I have a config.js file with some color values, API endpoints and source images. e.g.
//config.js
const coBrandConfig = {
firstapp: {
Target: {
BRAND_TARGET: "firstApp"
},
Login: {
LOGIN_BACKGROUND_IMAGE: require("./path/to/file.png"),
LOGIN_LOGO_IMAGE: require("./path/to/file.png"),
LOGIN_TITLE_TEXT: "FIRST APP",
LOGIN_STATUSBAR_CONTENT: "light-content",
LOGIN_BACKGROUND_COLOR: "#333" ,
LOGIN_SIMPLE_TEXT_COLOR: "#FFF",
LOGIN_TEXTINPUT_BACKGROUD_COLOR: "#FFF",
LOGIN_LOGIN_BUTTON_COLOR: "#009933",
},
},
}
module.exports = coBrandConfig["firstapp"]
Then I have a styles.js that gets and applies all of these values, which can change depending on the App variant. e.g.
import React from 'react'
import { StatusBar, Image } from "react-native"
import styled from 'styled-components/native'
import CoBrandConfig from "./config/config.js"
export function MainStyle () {
return(
<>
<StatusBar barStyle={`${CoBrandConfig.Login.LOGIN_STATUSBAR_CONTENT}`} backgroundColor={CoBrandConfig.Login.LOGIN_BACKGROUND_COLOR} />
<Image source={CoBrandConfig.Login.LOGIN_LOGO_IMAGE} />
<Svg width={50} height={50} fill={"#CCC"} source={CoBrandConfig.Login.MY_SVG} /> //HERES WHAT I WANT TO DO
<TitleText>{CoBrandConfig.Login.LOGIN_TITLE_TEXT}</TitleText>
</>
)
}
Thats why I would like to pass a require("./path/to/file.svg") to a variable.

I'm a bit late, but try adding .default.src after your require:
source={require("./path/to/file.svg").default.src}

I use this library, I hope it will be useful
npm install 'react-native-svg';
then
import { SvgUri } from 'react-native-svg';
<SvgUri
width="100%"
height="100%"
uri="url svg"
/>

Try this one
import SvgUri from 'react-native-svg-uri';
import svgExample from './file.svg';
return:
<SvgUri
width="250"
height="250"
svgXmlData={svgExample}
/>

custom paging slider missing config file for react.js

I am creating the custom paging slider from https://react-slick.neostack.com/docs/example/custom-paging/ I copied the code directly from the website and follow the instructions and installed the packages. When i try to run the code though i get the following error:
./src/Carousel.js
Module not found: Can't resolve './config.js' in '/Users/mcoe/Documents/Code/my-app1/src'
Code:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Style from "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
import Slider from 'react-slick';
import { baseUrl } from "./config.js";
export default class SimpleSlider extends React.Component {
render() {
const settings = {
customPaging: function(i) {
return (
<a>
<img src={`${baseUrl}"Random1${i + 1}.png`} />
</a>
);
},
dots: true,
dotsClass: "slick-dots slick-thumb",
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<div>
<h2>Custom Paging</h2>
<Slider {...settings}>
<div>
<img src={baseUrl + "Random1.png"} />
</div>
<div>
<img src={baseUrl + "Random1.png"} />
</div>
<div>
<img src={baseUrl + "Random1.png"} />
</div>
<div>
<img src={baseUrl + "Random1.png"} />
</div>
</Slider>
</div>
);
}
}

It looks like the component just wants a base url from a config file. The baseUrl needs to be the url path of your images. A relative path should work so if they are stored in my-app1/public/images/ you should be able to create a file config.js in the src directory like this:
//config.js
export const baseUrl = 'images/';

What it looks like currently, works. have not gotten the arrows to appear or images to appear in the dots underneath