I did the following using jquery. I want to achieve the same thing using react js but i don't how to render it more than once.
jsFiddle- https://jsfiddle.net/uxzdfsLj/4/
React js code
import ReactDOM from 'react-dom';
import React from 'react';
import {render} from 'react-dom';
import $ from 'jquery';
var Note = React.createClass({
componentDidMount : function(){
ReactDOM.findDOMNode(this.refs.nameInput).focus()
},
create:function(event){
if(event.charCode == 13) {
alert('Enter... (KeyPress, use charCode)');
}},
render :function(){
return(
<div class="reply">
<input type="text" class="text" ref="nameInput" placeholder="Enter Text Here..." onKeyPress={this.create}></input>
</div>
)
}
});
ReactDOM.render(<Note/>, document.getElementById('app'));
You can use dangerouslySetInnerHTML to render user-enterd HTML:
<div dangerouslySetInnerHTML={{__html: '<h1>Go</h1>'}} />
Note, however, that you should use it with extreme care. User-inputed HTML can open your app up for security vulnerabilities, if what is entered is stored on the server somewhere and sent to other users.
You can write your html in render method and just change your
componentDidMount : function(){
ReactDOM.findDOMNode(this.refs.nameInput).focus()
},
to
componentDidMount : function(){
this.refs.nameInput.focus()
},
Related
i want to import #heroicons/vue in Nuxt 3 but my icon not appear in frontend.
my setup:
import { HomeIcon, FilmIcon, PlusIcon } from "#heroicons/vue/solid"
my html:
<template v-for="(profileItem, i) in accountSetFields" :key="i">
<ProfileItems :user="user" :item="profileItem" />
<template v-slot:icon>
<component :is="profileItem.icon"></component>
</template>
</ProfileItems>
</template>
the variable profile.Item.icon has a string value of "HomeIcon"
I have tried to pass the value directly to the child component "ProfileItem.vue" but i receive the same error message.
When i pass the value directly as string ("HomeIcon" instead of profile.Item.icon) than it works because it mentioned the attribute from import { HomeIcon, FilmIcon, PlusIcon } from "#heroicons/vue/solid
<component :is="HomeIcon"></component>
Did anyone know how to load the icons dynamically?
That one works well
<script setup>
import { HomeIcon, FilmIcon, PlusIcon } from "#heroicons/vue/24/solid"
const icons = reactive({
home: HomeIcon,
film: FilmIcon,
plus: PlusIcon,
})
</script>
<template>
<component :is="icons.home"></component>
</template>
as explained here, you need the 24 in your import (for the size).
Not sure but this may also help maybe, didn't have to use that myself: https://github.com/tailwindlabs/heroicons/issues/564
Or you can forget about worrying about various icons configuration and fallback to that one (configured once and for all): https://stackoverflow.com/a/72055404/8816585
You can also use it without <component/> and register the icon as a component. Should also work with the composition api.
<template>
<CheckCircleIcon />
</template>
<script>
import { CheckCircleIcon } from "#heroicons/vue/24/solid";
export default {
components: {
CheckCircleIcon,
}
}
</script>
I am trying to install https://github.com/wagerfield/parallax/, I already read the documentation, and I got a sample of how to use it in javascript, I am going to use it in React, so, with that sample and the documentation for react I think my code should works, but it doesnt!, the console print this error:
Warning: React does not recognize the `dataDepth` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `datadepth` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
This is the sample that I read for the example:
https://github.com/wagerfield/parallax/blob/master/examples/pages/simple.html
And this is the example of how to use parallax.js in react:
https://github.com/wagerfield/parallax/issues/167
This is my actual code of jsx:
import React, {useEffect, useRef} from 'react';
// #ts-ignore
import Parallax from 'parallax-js';
import BackgroundIMG from '../assets/img/background.jpg';
import Guitar from '../assets/img/guitar.png';
import Layer1 from '../assets/img/layer1.png';
import Layer2 from '../assets/img/layer2.png';
import Layer3 from '../assets/img/layer3.png';
import Layer4 from '../assets/img/layer4.png';
import Layer5 from '../assets/img/layer5.png';
import Layer6 from '../assets/img/layer6.png';
import './styles/Home.css';
const Home = () => {
const sceneEl = useRef(null);
useEffect(() => {
const parallaxInstance = new Parallax(sceneEl.current, {
relativeInput: true,
})
parallaxInstance.enable();
return () => parallaxInstance.disable();
}, [])
return (
<div id="container">
<div id="scene" ref={sceneEl}>
<div dataDepth="1.00"><img src={Layer1} /></div>
<div dataDepth="0.80"><img src={Layer2} /></div>
<div dataDepth="0.60"><img src={Layer3} /></div>
<div dataDepth="0.40"><img src={Layer4} /></div>
<div dataDepth="0.20"><img src={Layer5} /></div>
<div dataDepth="0.00"><img src={Layer6} /></div>
</div>
</div>
)
}
export default Home;
My browser show me this!
But it doesnt have the parallax effect.
This is where u can see a demo of what I am talking about.
http://matthew.wagerfield.com/parallax/
I am having trouble showing my JsonEditor component. This is the code that i am working with:
<template>
<v-app>
<div class="admin">
<v-alert v-if="info.showAlert"
value=true
:type="info.alertType">
{{info.message}}
</v-alert>
<h2>Welcome to scope360 admins area. A place to edit scope360 configurations</h2>
<v-btn class="test" #click="switchEditClicked">{{switchButtonMessage}}</v-btn>
<div class= "editorComponents">
<div v-if="showJsonEditor" class="editor">
<json-editor is-edit="true" v-model="editedConfig" ></json-editor>
<v-btn #click="previewClicked">Preview Changes</v-btn>
</div>
<div v-if="!showJsonEditor" class="jsonDiff">
<vue-json-compare :oldData="originalConfig" :newData="editedConfig"></vue-json-compare>
<v-btn #click="saveClicked">Save</v-btn>
<v-btn #click="cancelPreviewClicked">Cancel</v-btn>
</div>
</div>
</div>
</v-app>
</template>
<script>
import JsonEditor from 'vue-edit-json'
import vueJsonCompare from 'vue-json-compare'
import{getConfig,updateConfig} from "../utils/network";
export default{
components: {
'vue-json-compare' : vueJsonCompare,
'json-editor' : JsonEditor
},
data: function () {
return {
originalConfig: {},
editedConfig: {},
showJsonEditor: true,
switchButtonMessage: "plain text",
info : {
showAlert: false,
alertType: "success",
message: ""
},
}
},
What am i missing? There is no errors when running. I am retrieving information from my backend to display some JSON information.
*The component has worked before, after som changes in design it stopped working
*Yes, i have checked if the data i am retrieving to display is correct and exists
Update
I made it work again but i would still love to know why my first attempt is not working?
This works:
import Vue from 'vue'
Vue.use(JsonEditor)
components: {
'vue-json-compare' : vueJsonCompare
},
//HTML
<JsonEditor is-edit="true" v-model="editedConfig" ></JsonEditor>
Update 2, Link to JsonEditor
https://www.npmjs.com/package/vue-edit-json
To answer your question on why it's not importing the component with your first approach. That's because the author decided to make it a plugin instead of importable component. (See Vue docs on plugin).
Such that when you do import on this component, it may be imported but never rendered since it's written without exporting the default module.
If you need to register this component by the import keyword, you could specify the complete path to the component file itself.
import JsonEditor from "vue-edit-json/src/JsonEditor";
new Vue({
components: {
JsonEditor
}
}
And that should give you the same effect.
BTW, a quick tip for you:
When defining a component with PascalCase, you can use either case when referencing its custom element. That means both <my-component-name> and <MyComponentName> are acceptable.
So in your case, since you seem to want to have the components in kebab-case, you could drop the component "alias" name from the components object.
import VueJsonCompare from 'vue-json-compare';
components: {
VueJsonCompare
}
// ...
<vue-json-compare :oldData="originalConfig" :newData="editedConfig"></vue-json-compare>
I have a React application that uses vega-lite for data visualizations. I tried to use the official tooltip addon for vega (https://github.com/vega/vega-tooltip), however I have no idea how to do it in a React component.
This is the component I have:
import React from 'react';
import PropTypes from 'prop-types';
import VegaLite from 'react-vega-lite';
const VegaChart = ({data, spec}) => {
return(
<div className="vega-chart-wrapper">
<VegaLite spec={spec} data={data} />
</div>
)
}
VegaChart.propTypes = {
data: PropTypes.object.isRequired,
spec: PropTypes.object.isRequired
}
export default VegaChart;
From the documentation of vega-tooltip, it says that I can install the module and then I have to do this:
<!-- Placeholder for my scatter plot -->
<div id="vis-scatter"></div>
var opt = {
mode: "vega-lite",
};
vega.embed("#vis-scatter", vlSpec, opt, function(error, result) {
// result.view is the Vega View, vlSpec is the original Vega-Lite specification
vegaTooltip.vegaLite(result.view, vlSpec);
});
This looks like the standard way to integrate in a jQuery application, but this is not gonna work in a React component. Any ideas?
Your react-vega-lite must already include vega-lite. So
import * as vega from 'vega-lite';
And put the rest in componentDidMount of your VegaChart
I'm trying to create simple ToDo app using Ractive.js and Redux, but I ran into a problem with rendering more than one component on my page.
Javascript code:
import Ractive from 'ractive';
import template from './Home.html';
import './Home.less';
import { AddToDoForm, ToDoList } from '../';
export default Ractive.extend({
template,
data: {
message: 'This is the home page.',
},
components: {
AddToDoForm,
ToDoList
}
});
HTML of the component:
<AddToDoForm store={{store}} />
<ToDoList store={{store}} />
But only the first component is rendered. The store parameter I'm passing is the Redux store, but it doesn't work even without it.
I would add to verify defaults as a
...
components:{
AddToDoForm: AddToDoForm,
ToDoList: ToDoList
}
...
syntax examples (answer/31096635)