I have a JSON file with a list of iconCards where each iconCard has a property icon.
This property contains the name of a react-icons Component I want to display.
My JSON file:
{
"input": {
"placeholder": "Paste in your individual video url here..."
},
"button": {
"text": "Download video"
},
"iconCards": [
{
"icon": "BsEmojiHeartEyes",
"title": "Free to use",
"description": "Our website offers a free way to download Instagram videos. No registration or sign-up is required. Enter the URL of the video you wish to download and click the 'Download' button."
},
{
"icon": "BsStopwatch",
"title": "Fast download speeds",
"description": "Our Instagram video downloader website offers fast download speeds so you can quickly and easily download your favourite videos."
},
{
"icon": "GrUserExpert",
"title": "Download in HD",
"description": "Our Instagram video downloader allows you to download videos in high definition, so you can enjoy your favourite videos in the best quality possible."
},
{
"icon": "AiOutlineVideoCamera",
"title": "No Download Limits",
"description": "Our Instagram video downloader has no download limits, so you can download as many videos as you want!"
},
{
"icon": "GrUserExpert",
"title": "Fully Secured",
"description": "Our website is fully secured with the latest security features. Your data is safe with us. We use the latest encryption technology to protect your data."
},
{
"icon": "GrUserExpert",
"title": "Mp4 format",
"description": "Our website offers the ability to download Instagram videos in MP4 format. This popular video format is widely compatible with many devices and media players."
}
],
"sections": [
{
"title": "Instagram Video-Download",
"description": {
"paragraphs": [
"Our website is the best place to download Instagram videos. With our simple and easy-to-use interface, you can download videos from Instagram in just a few clicks. We offer high-quality videos optimized for all devices so that you can enjoy your videos on any device."
]
}
},
{
"title": "About Instagram Video Downloader?",
"description": {
"paragraphs": [
"If you are looking for a website that will allow you to download videos from Instagram, then you are in the right place. This website is straightforward to use, and it is entirely free. Enter the URL of the Instagram video you want to download and click on the download button. You can save the video to your device within seconds."
]
}
},
{
"title": "How to Download Instagram Videos?",
"description": {
"paragraphs": [
"By visiting this page, your purpose is to download an Instagram video and save it to your device. Since Instagram doesn't offer a download option, we're here to help you.",
"1) Simply enter the Instagram video URL of your choice, and click on the Download button.",
"2) Our servers will start fetching the video and provide you with a preview option and a download button to start downloading the video.",
"By hitting the download button, you can save it to your device in MP4 format."
]
}
}
],
"faqs": {
"heading": "FAQs for Instagram Video Downloader",
"items": [
{
"question": "Can we download reels or IGTV videos from this tool?",
"answer": "This website supports all kinds of Instagram video downloading, whether it be Instagram video, Instagram reels or IGTV video. "
},
{
"question": "Is it legal to download videos from Instagram?",
"answer": "Yes, it is legal to download videos from Instagram. However, you should only download videos that you have the rights to. If you download a video you do not have the right to, you could infringe on copyright laws."
},
{
"question": "How to download video from Instagram?",
"answer": "Our website solves the same purpose. All you need is Instagram video URL to download it."
},
{
"question": "How to download a video from Instagram with audio?",
"answer": "Our website downloads the video with audio only. If you wish to download only audio from Instagram videos, you can check out Instagram audio downloader page."
}
]
},
"headings": {
"h1": "Instagram Video Downloader",
"h1Paragraph": "Download Instagram videos and save them to your device.",
"h2": "Instagram Video Downloader Features",
"h2Paragraph": "List of top features"
}
}
In my Tsx I Failed hard tho, I tried everything I can think of:
<UL>
{content.iconCards.map((Item, index) => (
<LI key={index}>
<>
<Item.icon/> <-- How to render it?
<h3 className="font-bold">{Item.title}</h3>
<p>{Item.description}</p>
</>
</LI>
))}
</UL>
My interface:
interface PageProps {
input: {
placeholder: string
}
button: {
text: string
}
iconCards: {
icon: React.ReactNode
title: string
description: string
}[]
sections: {
title: string
description: { paragraphs: string[] }
}[]
faqs: {
heading: string
items: {
question: string
answer: string
}[]
}
headings: {
h1: string
h1Paragraph: string
h2: string
h2Paragraph: string
}
}
I made this working in a TypeScript file, where I can type the Icon as ReactIcon. However,
I want to build a multilingual Page and for that, JSON files are better, I guess.
Thanks!
You can import separte React icons folder in a Single Component & map it accordingly.
import * as ReactIconAI from "react-icons/ai";
import * as ReactIconGR from "react-icons/gr";
import * as ReactIconBS from "react-icons/bs";
const ReactIcon = ({ icons }) => {
const iconFolder = icons.slice(0, 2).toLowerCase();
// Map Icon to Respective Folder by comparing the First two Character of the
//Icons
let icon =
iconFolder === "ai"
? ReactIconAI[icons]
: iconFolder === "bs"
? ReactIconBS[icons]
: iconFolder === "gr"
? ReactIconGR[icons]
: "";
// return only if the icon Exist
return icon && React.createElement(icon);
};
By using the above component , You can map through your json.
return (
<>
{content.iconCards.map((Item, index) => (
<>
<h3 className="font-bold">{Item.title}</h3>
<p>{Item.description}</p>
<ReactIcon icons={Item.icon} />
</>
))}
</>
);
Related
I'm new to developing skills with Alexa. I've followed the Build Multi-turn Skills Tutorial with Alexa Conversations tutorial up to module 3.
Because I want to develop a skill only for German users I've altered the language settings in the Alexa developer console of my skill to only support German language.
I change the APLA code in the tutorial with the APLA with the "edit audio response" to this:
{
"type": "APLA",
"version": "0.8",
"mainTemplate": {
"parameters": [
"payload"
],
"item": {
"type": "Selector",
"strategy": "randomItem",
"items": [
{
"type": "Speech",
"contentType": "text",
"when": "${environment.alexaLocale == 'de-DE'}",
"content": "Willkommen bei meiner App"
},
{
"type": "Speech",
"contentType": "text",
"when": "${environment.alexaLocale == 'de-DE'}",
"content": "Willkommen."
},
{
"type": "Speech",
"contentType": "text",
"when": "${environment.alexaLocale == 'en-US'}",
"content": "Welcome."
}
]
}
}
}
At the bottom of the console I see that my locale is set to German but when I preview the APL above the audio player always says "Welcome." with the English voice, the other two options are never triggered. What am I missing here?
The audio response tool doesn't take in account the language of the website.
There are no ways to test the condition environment.alexaLocale in this tool.
To test it, update the code of your skill and test it either on the test tabyour skill in the developer console or directly on a real device. Just tested with your code, it works perfectly. Just not on the audio tool.
I have some paths in a react file that look like this:
import azureIcon from './azure.png';
import dropboxIcon from './dropbox.png';
I also have a separate JSON file that looks like this:
{
"posts": [
{
"id": 1,
"name": "azure",
"description": "blah blah",
"icon": "azureIcon"
},
{
"id": 2,
"name": "dropbox",
"description": "blah blah",
"icon": "dropboxIcon"
}
]
}
Is it possible to have it identify the variable like this? Or will it not work because currently the value of "icon" is set to a string value? What would be a good way to approach this?
Thank you!
It is impossible to do this directly, but you could do something like
const icons = { azureIcon, dropboxIcon };
const MyComponent = () => {
return (
<div>
{posts.map(post => (
/*or w/e the correct way to normally render it is*/
<img src={icons[post.icon]} />
)}
</div>
)
}
I would suggest to place images in public accessible folder. Here is example from create-react-app docs section in case you use it.
So to simplify your code you can use such approach:
Place icons in public accessible folder (let`s say we have icons folder inside)
Update your config
const posts = [
{
"id": 1,
"name": "azure",
"description": "blah blah",
"icon": "azure.png"
},
{
"id": 2,
"name": "dropbox",
"description": "blah blah",
"icon": "dropbox.png"
}
]
Show icons in such manner
const Component = (posts) => (
<React.Fragment>
{posts.map(post => <img
key={post.id}
src={process.env.PUBLIC_URL + `/icons/${post.icon}`}
/>}
</React.Fragment>
)
If I have to use icons as images I would choose the way #Kison suggests.But it is nice if you could font awesome, here it is showed how to install/import font awesome https://fontawesome.com/start and you can search icon here https://fontawesome.com/icons?d=gallery and all you have to do is paste the website says html code it is like following:
<i class="fab fa-accusoft"></i> this will render azure icon and
<i class="fab fa-dropbox"></i> this will render dropbox icon.
Here these are two icons' links:
(azure icon) https://fontawesome.com/icons/accusoft?style=brands
(dropbox icon) https://fontawesome.com/icons/dropbox?style=brands
I need to integrate map chart using fusion chart library in my react application. after install fusion chart library through yarn configured component including fusion chart library, but when i render the map chart it shows me below error
After having error i just watch the node modules and check the existence of file, but seems like its not there, but my fusion chart installed successfully with no error then how this happened?
Here is my code
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import FusionCharts from 'fusioncharts';
import Maps from 'fusioncharts/fusioncharts.maps';
import World from 'fusioncharts/maps/fusioncharts.worldwithcountries';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
ReactFC.fcRoot(FusionCharts, Maps, World, FusionTheme);
class MapChart extends Component {
state = {
dataSource: {
"chart": {
showCanvasBorder: true,
canvasBorderColor: "#000000",
canvasBorderThickness: 1,
showBorder: true,
borderColor: "#000000",
fillColor: "#f1f1f1",
caption: "* USA traffic not displayed on Heat Map",
includevalueinlabels: "1",
showHoverEffect: false,
showEntityHoverEffect: false,
theme: "fusion",
},
data: [
{
"id": "27",
"value": "8",
"color" : "#f65122"
},
{
"id": "159",
"value": "3",
"color" : "#fcc50b"
},
{
"id": "142",
"value": "3",
"color" : "#f65122"
},
{
"id": "141",
"value": "9",
"color" : "#f3172d"
},
{
"id": "173",
"value": "9",
"color" : "#f3172d"
},
{
"id": "113",
"value": "5",
"color" : "#f65122"
},
{
"id": "193",
"value": "5",
"color" : "#f65122"
},
{
"id": "122",
"value": "9",
"color" : "#f65122"
}
]
}
}
render() {
return (
<React.Fragment>
<div style={{ width: '100%', margin: '20px', textAlign: 'center' }}><button><Link to="/">Back to home</Link></button></div>
<div style={{ textAlign: 'center' }}>
<ReactFC
type="worldwithcountries"
width="80%"
height="500"
dataFormat="JSON"
dataSource={this.state.dataSource} />
</div>
</React.Fragment>);
}
}
export default MapChart;
Any help on this issue would be greatly appreciated. Thanks!
Fusion Maps XT offers interactive maps to plot geographical data like revenue by regions, population by state, survey and election results effectively. You can also drop markers on the map to pinpoint places like office locations and flight routes. It has over 1000 maps including all continents, major countries and all the US states.
Fusion chart library initially not provided any collection of maps. Whenever you install fusion chart library on initial base it has only few maps file in map folder of package. Due to that reason you're file is not available in the whole package. They provided the link on their official page for download all the map related to fusion map chart.
To render these maps, you need to download the map definition files from here and copy-paste the maps folder within your fusion charts directory.
Please follow the steps
open link https://www.fusioncharts.com/download/map-definition-files
click on Download Map Definition Files(https://cdn.fusioncharts.com/downloads/addons/fusionmaps-xt-definition.zip) which contains collection of all the maps available in Fusion Maps XTall the maps available in Fusion Maps XT
after download copy the /maps folder from this download package and paste it in your fusion charts folder.
now run you're existing application the file will be found and your react application will work as expected.
Every information already defined on it official site of fusion chart but not in proper way so with the help of link which earlier defined you'll be directly redirect to that instruction page.
On GitHub i created one repository with map chart using fusionchart library, so you can download that repository and check exact functionality of map chart.
GitHub Repository
Since you are rendering the world with countries map in your app, you need to import fusioncharts.worldwithcounties.js, however, if you install FusionCharts via npm it does not have worldwithcountries file in the map folder, to get the file you need to install fusionmaps, here is the link - https://www.npmjs.com/package/fusionmaps
This will install all the map definition files, then you can use the following command:
import World from 'fusionmaps/maps/fusioncharts.worldwithcountries';
I have developed an app and it is functioning properly, however when it comes to designing, i am unable to achieve what is given in the example despite of doing the same code in the example. I want to achieve this design where image is in the center with title above and description down but what I am getting is this, side image, side title and description down. Please let me know how to achieve that. Here is my sample of my code
"response" : {
"outputSpeech" : {
"type" : "SSML",
"ssml" : "<speak>Hello,welcome!</speak>"
},
"card": {
"type": "Standard",
"title": "My Title",
"text": "My description",
"image": {
"smallImageUrl": "small image with the width 720 and height 480",
"largeImageUrl": "large image with the width 1200 and height=800"
}
},
"reprompt": {
"outputSpeech": {
"type": "SSML",
"ssml": "<speak>I am waiting for your command!!</speak>"
}
},
"shouldEndSession" : false
}
It looks like Amazon has changed the Standard Card layout. Images are now shrinked and pushed to the left. The examples shown in current documentation on Cards have the new layout. The blog post you are referring is more than one and half years old
When you post a link to Facebook, it grabs the article title, description and relevant images. Most major sites have the required OG tags, making it easy to grab this info, but FB is also able to handle websites that don't have them (you can try it here).
Clearly they've got a system in place for grabbing this info in the absence of OG tags. Does anyone know if there's an open-source version?
I'm thinking it would need (in order of preference for each section):
Title:
Check for og:title tag.
Check for regular meta "title" tag.
Check for h1 tag.
Description:
Check for og:description tag.
Check for regular meta "description tag"
Check for div or p tags with sufficient content to indicate a body paragraph
Images:
Check for og:image tags
Check for images over a certain size (say 100x100) and give priority to those that come first.
Thanks a lot!
https://github.com/Anonyfox/node-htmlcarve
The htmlcarve module for Node.js does most of what you're after, here's the output generated from this page:
htmlcarve = require('htmlcarve');
htmlcarve.fromUrl('https://scotch.io/tutorials/using-mongoosejs-in-node-js-and-mongodb-applications', function(error, data) {
console.log(JSON.stringify(data, null, 2));
});
This produces:
{
"source": {
"html_meta": {
"title": "Easily Develop Node.js and MongoDB Apps with Mongoose ⥠Scotch",
"summary": "",
"image": "/wp-content/themes/thirty/img/scotch-logo.png",
"language": "en-US",
"feed": "https://scotch.io/feed",
"favicon": "https://scotch.io/wp-content/themes/thirty/img/icons/favicon-57.png",
"author": "Chris Sevilleja"
},
"open_graph": {
"title": "Easily Develop Node.js and MongoDB Apps with Mongoose",
"summary": "",
"image": "https://scotch.io/wp-content/uploads/2014/11/mongoosejs-node-mongodb-applications.png"
},
"twitter_card": {
"title": "Easily Develop Node.js and MongoDB Apps with Mongoose",
"summary": "",
"author": "sevilayha"
}
},
"result": {
"title": "Easily Develop Node.js and MongoDB Apps with Mongoose",
"summary": "",
"image": "https://scotch.io/wp-content/uploads/2014/11/mongoosejs-node-mongodb-applications.png",
"author": "sevilayha",
"language": "en-US",
"feed": "https://scotch.io/feed",
"favicon": "https://scotch.io/wp-content/themes/thirty/img/icons/favicon-57.png"
},
"links": {
"deep": "https://scotch.io/tutorials/using-mongoosejs-in-node-js-and-mongodb-applications",
"shallow": "https://scotch.io/tutorials/using-mongoosejs-in-node-js-and-mongodb-applications",
"base": "https://scotch.io"
}
}
If you've got Node.js installed, then install it using
npm i -g htmlcarve
and you can run it from the command line directly.