I'm using a rich text editor called Froala, in its React version. The docs are intended for the JQuery one. From the little that is written about React, i found these instructions:
Events and Methods
Events can be passed in with the options, with a key events and object where the key is the event name and the value is the callback function.
options: {
placeholder: "Edit Me",
events : {
'froalaEditor.focus' : function(e, editor) {
console.log(editor.selection.get());
}
}
}
Using the editor instance from the arguments of the callback you can call editor methods as described in the method docs. Froala events are described in the events docs.
I understand how i can use events, but not calling methods. Does it mean that i can access the editor instance, only from an event? Can someone clarify this? For instance, i would like to use the html.insert() method, as described here:
$('.selector').froalaEditor('html.insert', 'foo bar', true);
How would that be used with the Froala React component?
In case anybody is interested, i implemented an easy workaround:
I use the "initialized" event, just to get the Froala instance, and place a reference to it in my class::
'froalaEditor.initialized' : (e, editor)=> {
this.froalaInstance = editor;
}
Now i can access the Froala instance...
If anyone is still interested in how to achieve this take a look at
https://froala.com/wysiwyg-editor/docs/framework-plugins/react/
It's pretty straight forward to define methods in the config object.
Related
I've been playing around with React and Azure App Insights.
const appInsights = useAppInsightsContext();
For Events and Metrics only, there seems to be 2 ways of doing things. Why is this? And why is it only for these 2 things only ie for PageViews or exceptions you can only use the second way (appInsights.trackPageView, appInsights.trackException)
//first way
const trackEventHook = useTrackEvent(
appInsights,
"AppInsightsPage Track Event Hook",
{ extraData: "some extra data important to this" },
false
);
trackEventHook({ extraData: "function call extra data" });
//2nd way
appInsights.trackEvent({ name: "AppInsightsPage Custom Event" }, undefined);
While using Application Insight, we use TrackEvent in our code to count various events. How often users choose a particular feature or maybe how often they make particular choices.
For Example, we want to understand the user behavior on a site and we want to know about specific actions like clicking the Add to Cart button.
This can be done by two ways :
Using trackEvent Method
appInsights.trackEvent({ name: 'EventName', properties: { anyProperty } })
We use appInsights object that we are exporting and pass some data to trackEvent, the name of the event we are tracking and any custom properties we want to include in the event.
Using React Plugin useTrackEvent Hook
const trackEventName = useTrackEvent(appInsights, "Event Name", condition);
The useTrackEvent Hook is used to track any custom event that an application may need to track, such as a button click or other API call. It takes four arguments:
Application Insights instance (which can be obtained from the useAppInsightsContext Hook).
Name for the event.
Event data object that encapsulates the changes that has to be tracked.
skipFirstRun (optional) flag to skip calling the trackEvent call on initialization. Default value is set to true.
trackExpection is used to log exception which are related to API, we don't know when they will happen and for trackPageView, page view telemetry is sent by default when each screen or page is loaded. So, in trackExpection and trackPageView we don't have any data object to track any changes. That's why we don't use useTrackEvent hook for this two.
For more information please check the following Microsoft Documents:
React Plugins for Application Insights.
Application Insight API.
So I am trying to work with FullCalendar and I want to have the user be able to edit an event details, click update and I locally update the event and then push it up to the server. I have the following code, but the issue is when there are multiple changes, is calling the event callback multiple times. Is there a way I could do this just once to save on many API calls? Here is the code I have
let currentEvent = calendarApi.getEventById(eventId);
currentEvent.setExtendedProp('notes', notes);
currentEvent.setExtendedProp('person', person);
Maybe there is a different method I am just not seeing in the docs?
The undocumented mutate method that's used to implement setExtendedProp accepts an object that can have multiple properties. You could use it like this:
event.mutate({
extendedProps: {
notes: notes,
person: person,
},
})
or, using object property value shorthand:
event.mutate({extendedProps: {notes, person}})
I have absolutely no experience with fullcalender though, so use at your own risk!
I see this a lot...
this.function = this.function.bind(this)
Is there a good video that explains what's happening here?
Thanks!
I'm assuming you are already using babel to compile your code, why not use the class properties feature and then you define your class method as an arrow function and don't have to bind it in the constructor. https://medium.com/#joshblack/writing-a-react-component-in-es2015-a0b27e1ed50a#.igcom8sgv gives step by step how to set it up then you write your class methods like such : myFunction = () => { // do stuff } and the arrow function binds this appropriately.
WebStorm is most powerfull IDE for React: understand JSX Harmony, Components, props, state, etc. Has code auto formatting, understand npm scriptsm etc.
for free..
I always used Brackets, but when I started working with React I had to switch to a different editor due to the complete lack of support by Brackets.
I'm now using Atom with ton of plugins to work with React and be comfortable, these are the ones needed to work with React:
language-babel by gandm
linter-eslint by AtomLinter
react by orktes
the latter, especially, has an awesome support for React and JSX stuff.
I'm using jQuery to create event bindings in a ReactJS component's componentDidMount function, which seems like the right place to do this.
$('body').on('defaultSearchContext.registerQueryEditor', (function(_this) {
return function(event, component) {
_this.setState({
queryEditors: _this.state.queryEditors.concat([component])
});
};
})(this));
This code isn't actually run on componentDidMount, it's simply setting up the binding that later calls setState when the event fires. However, this generates the following warning every time this event triggers, which pollutes my console with dozens of warnings:
Warning: setState(...): Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.
I have tried moving the setState code to a separate function like onEvent and calling that from the binding in componentDidMount but the warning is still produced.
Ideally, I'd like to create the binding in the proper place, indeed, there is some issue with doing it in componentDidMount. If not, I'd like to know if it's possible to silence the warning, or whether I should perhaps file a bug for ReactJS itself. If it helps, I'm using ReactJS 0.14.3 (latest at this time).
This is similar to, but not the same as React Js onClick inside render. In that case, the solution is to return an anonymous function to onClick, but that doesn't seem applicable to my situation.
You are trying to coordinate events between independent components. This is a fairly standard thing to do, and it doesn't require DOM events. The standard practice for doing this in React is to use a store/dispatcher pattern like Redux or Flux (I personally prefer redux). However, if this is part of a larger, not-completely-React application, then this may not be possible. If it is just for a small piece of an React app, it may still be overkill.
All you need is an object to coordinate events. An event is just a collection of callbacks, possibly typed or keyed. This requires nothing more than an object shared between two places. DOM Events are overkill; jQuery is overkill. You just need to trigger a callback.
This is a VERY SIMPLE event coordinator.
let simpleEventCoordinator = {
callbacks: new Map(),
getHandler(eventKey) {
let handler = this.callbacks.get(eventKey);
if (!handler) {
handler = new Set();
this.callbacks.set(eventKey, handler);
}
return handler;
},
registerCallback(eventKey, callback) {
this.getHandler(eventKey).add(callback);
},
removeCallback(eventKey, callback) {
this.getHandler(eventKey).delete(callback);
},
trigger(eventKey, data) {
this.getHandler(eventKey).forEach(c => c(data));
}
Keep a map of callbacks, which will be nameOfEvent => callback(). Call them when asked. Pretty straightforward.
I know nothing about how your components are structured, but you said they are independent. Let's say they look like this:
React.render((
<div>
<QueryManager />
<button onClick={() => simpleEvent.trigger('event')}>{'Update'}</button>
</div>
), document.body);
This is all your component needs to handle this event
componentDidMount() {
simpleEvent.registerCallback('event', this.update);
}
componentWillUnmount() {
simpleEvent.removeCallback('event', this.update);
}
update() {
//do some stuff
}
I've put together a very simple codepen demonstrating this.
Looking at the source code of where that warning is coming from, it appears that if some reference is maintained before an update is about to happen, it throws that warning. So maybe the way your mixing the jQuery events and react is creating a memory leak? Its hard to say exactly because of the lack of surrounding code to your snippet what else could be going on.
I am thinking about implementing context help in my application and i wonder if it is possible to implement it the way i have in mind:
Register global shortcut to Ext.Body() ex. ctrl+h
Shortcut handler will find the focused component and call its showHelp method
If component have no showHelp method it will move to its parent and call showHelp method.
I wonder if step 2 is possible?. Or is there a better way to do this?
Ok i dig into it. At first i do the following to implement context help:
Created help plugin and added it to each component which should provide context help. The plugin register click listener to each component.
The fired click event registers its source into static HelpManager that holds reference to last focused component
Then after pressing shortcut i get the last component from HelpManager and fire context help using its help config.
Code:
Ext.define('GSIP.core.help.GSIPHelp',{
alias:'plugin.help',
init: function(component) {
//var me = this;
component.on('afterrender',function(c) {
//WHY FOCUS EVENT IS NOT WORKING?? ONLY CLICK.
c.getEl().on('click',function() {
console.log('SHOUD REGISTER FOCUS');
GSIP.core.help.GSIPHelpMgr.registerFocus(component);
});
});
}
});
That solution had a serious flaw. If component has a parent and both of them got help plugin the click event is firing twice with parent as last.
During coding i found in docs Ext.FocusManager and that was it! Using it i am able to find focused component. Using simple function: if the component does not have help i scan through its parents to find one, if there is no parent i just show index, i was able to create context help.
Ext.define('GSIP.core.help.Help',{
mixins:{
document:'GSIP.core.utils.Document'
},
url:'/GSIP/resources/gsip/core/help/html/',
showHelp:function(comp) {
if (comp.help != undefined) {
this.showDocumentSrc(this.url + comp.help + '.html');
}else{
if (comp.ownerCt == undefined) {
this.showDocumentSrc(this.url + 'index.html');
}else{
this.showHelp(comp.ownerCt);
}
}
}
});