I am trying to convert a basic success page design from figma to reactcode using anima.
import React from "react";
function success() {
return (
<Frame1
ellipse2="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/ellipse-2#2x.svg"
ellipse1="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/ellipse-1#2x.svg"
maskGroup="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/mask-group#2x.svg"
great="Great!"
text1="Your payment was successfull"
place="Okay"
/>
);
}
export default success;
function Frame1(props) {
const { ellipse2, ellipse1, maskGroup, great, text1, place } = props;
return (
<div className="frame-1">
<div className="overlap-group1">
<img className="ellipse-2" src={ellipse2} />
<img className="ellipse-1" src={ellipse1} />
<div className="typcntick smart-layers-pointers ">
<img className="mask-group" src={maskGroup} />
</div>
<h1 className="great avenirnext-medium-black-48px">{great}</h1>
</div>
<div className="text-1 avenirnext-medium-black-24px">{text1}</div>
<div className="overlap-group">
<Rectangle1 />
<div className="place avenirnext-demi-bold-white-36px">{place}</div>
</div>
</div>
);
}
function Rectangle1() {
return <div className="rectangle-1 smart-layers-pointers "></div>;
}
I have copied the jsx and css files from anima and now I am trying to import that into my app.
But I am unable to display it on my app. How can I resolve this?
import React from 'react';
import './success.css';
import success from './success';
const App = () => {
return (
<div>
<success/>
</div>
);
}
export default App;
I checked the react code and it works for me, maybe there's something basic that is not setup correctly. First thing is to try and see if your react code shows a simple hello world text.
I see that you are using anima to import figma and export react code. If you manage to get it work that's great, if not I recommend trying Desech Studio and see if that works for you.
It imports Figma with relative html/css positioning and it exports react code. Here's the github repo for more details.
The success component you imported and exported should start with a capital letter like Success then only react understands that its a component
Related
Recently I was working on a component library using styled-components. But the components that are built using that don't get rendered on the page.
Basically right now there are two button components inside the package. The one built with normal JSX works fine but the other one doesn't.
This works fine
import { Button } from "rishabh-venom-test-lib";
function App() {
return (
<div>
<Button label="Hello World" />
</div>
);
}
export default App;
This doesn't
import { LinkButton } from "rishabh-venom-test-lib";
function App() {
return (
<div>
<LinkButton label="Hello World" />
</div>
);
}
export default App;
Here I'm linking the code and the package URL
https://github.com/rishabh-venom/my-test-lib
https://www.npmjs.com/package/rishabh-venom-test-lib
Any other suggestions will be appreciated. As this is my first component library.
I am working on a project that uploads images to Heroku with their new react-simple-file-upload addon. After uploading the file, a URL is provided for the image saved in the DB. I managed to display one of the images, but now I would like to display multiple-- essentially create a simple gallery. I am thinking i'll have to make a function that uses useState and an array, but am not really sure how to design it beyond that. Here is my working code:
import React from "react";
import SimpleFileUpload, { SimpleFileUploadProvider } from "../components/SimpleFileUpload"
import { useState } from 'react'
import "./styles.css"
const API_KEY = '...'
export default function About() {
const [files, setFiles] = useState();
console.log(files)
return (
<div className="App">
<h1>upload an image</h1>
<SimpleFileUpload apiKey={API_KEY} onSuccess={setFiles} />
{files && (
<div>
<img className="photo" src={files} witdh="50" hight="50" alt="huh?"/>
<div className="gallery">
</div>
</div>
)}
</div>
);
}
Any tips or tricks is greatly appreciated
I am trying to add images dynamically from the assets folder in my react component. This is the code that I have:
import React from 'react';
const card = (props) => {
const image = require.context(
`../../assets/imgs`,
true,
new RegExp(`(${props.vnum}_${props.snum}.png)$`)
);
return (
<div>
<img src={image} alt="image" />
<p>{props.english}</p>
<p>{props.french}</p>
</div>
);
};
When I do this, I get the following error:
TypeError: webpack_require(...).context is not a function
I used CRA and looking up past posts I see that this should work. Where am I going wrong?
This should be enough.
import React from 'react';
const Card = (props) => {
return (
<div>
<img alt="image" src={require(`../../assets/imgs/${props.vnum}_${props.snum}.png`} />
<p>{props.english}</p>
<p>{props.french}</p>
</div>
);
};
It's necessary to use it in those convention?
The simpler solution without require.context()
import React from 'react';
import Image from "../../assets/img/english
import Image from "../../assets/img/french
const card = (props) => {
return (
<div>
<img src={english} alt="image" />
<p>{props.english}</p>
<img src={french} alt="image" />
<p>{props.french}</p>
</div>
);
};
Also:
It's possible to add some conditional rendering here (depends on variable render english or french) - i'm not sure You need it.
require.context is a special feature supported by webpack's compiler that allows you to get all matching modules starting from some base directory. The intention is to tell webpack at compile time to transform that expression into a dynamic list of all the possible matching module requests that it can resolve, in turn adding them as build dependencies and allowing you to require them at runtime.
So if regex matches more than 1 element - mapping is needed - however i think in this specific issue import is enough.
you can use simply require()
import React from "react";
import "./styles.css";
import Card from "./card";
export default function App() {
return (
<div className="App">
<h1>Hello</h1>
<h2>check this!</h2>
<Card vnum={12} snum={13} english={"english"} />
</div>
);
}
card.js
import React from "react";
export default function card(props) {
const image = require(`./img/${props.vnum}_${props.snum}.jpg`);
return (
<div>
<img src={image} alt="image1" width="200px" />
<p>{props.english}</p>
</div>
);
}
you can check this at here https://codesandbox.io/s/elegant-ramanujan-5qwcp
This is not the exact anser for your question, but might help you in later scenes maybe you may already know about this. If you have got URL's of the image that can be grabbed from internet, then you can save them into an array. Eg: const array = ['url1', 'url2',....etc]
Then use : array.map(url => { <img src={url} /> })
Also if you are pulling from an API use the same method.
Setup
I've loaded the Vanilla JS library lightgallery.js through NPM and importing it as normal.
Issue
I'm initializing this library through componentDidMount(), but it's failing to compile because 'lightGallery' is not defined. see sample below
I verified the library is importing by removing componentDidMount() and initializing it through the Chrome Console. When I do this, it works as intended.
I'm not clear on why it's resulting in 'lightGallery' is not defined when the import clearly works when i don't initialize it with componentDidMount(). I'm guessing it's either an issue with the elements not being present in the DOM at load or it's an issue with the way my import is setup.
Any help would be appreciated.
Current Page
This is a stripped down version of my setup with the gallery elements hardcoded for easy explanation.
import React, { Component } from 'react';
import 'lightgallery.js';
class Gallery extends Component {
componentDidMount() {
lightGallery(document.getElementById('lightgallery'));
}
render() {
return (
<>
<section>
<h1>Gallery</h1>
</section>
<section>
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
<a href="img/img3.jpg">
<img src="img/thumb3.jpg" />
</a>
</div>
</section>
</>
);
}
}
export default Gallery;
I am just starting a new React project but I am having trouble importing a particular file, which is located in a seperate folder named 'Components', into my app.js file.
Please have a look below at the code I am using to import.
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import Category from './Components/Category.js';
import './App.css';
And here is the barely developed Category component, if its of any use in providing a sulution?
const Category=()=>{
return (
<div>
<div class="categories">
<div class="category-choice">
<h1>CAREER</h1>
</div>
<div class="category-choice">
<h1>FINANCE</h1>
</div>
</div>
</div>
)
}
export default Category;
And here is the error message react is providing me with
you need to import React everywhere where you are using JSX. it is important because all JSX elements get transpiled to React.createElement. so React must always be in scope.
import React from 'react' // add this line
const Category=()=>{
return (
<div>
<div class="categories">
<div class="category-choice">
<h1>CAREER</h1>
</div>
<div class="category-choice">
<h1>FINANCE</h1>
</div>
</div>
</div>
)
}
export default Category;