hello i am integrating CKEditor into a react project (create next-app) when i first use functional component, in the code below, it works as expected
import React, { useState, useEffect, useRef } from 'react'
export default function MyEditor (props) {
const editorRef = useRef()
const [editorLoaded, setEditorLoaded] = useState(false)
const { CKEditor, ClassicEditor } = editorRef.current || {}
useEffect(() => {
editorRef.current = {
CKEditor: require('#ckeditor/ckeditor5-react').CKEditor,
ClassicEditor: require('ckeditor5-custom-build/build/ckeditor'),
}
setEditorLoaded(true)
}, [])
const editorConfiguration = {
....
};
return editorLoaded ? (
<CKEditor
editor={ClassicEditor}
...
/>
) : (
<div>Editor loading</div>
)
}
but when i try to translate this same code into a react class component, it fails
import React, { Component } from "react";
export default class Editor extends Component {
constructor(props) {
super(props);
this.state = {
myText: this.props.data,
EditorLoading: true,
};
this.editorConfiguration = {
...
this.editorRef = React.createRef();
}
SO is not allowing me to paste all the code *****
Related
how to implement custom ckeditor 5 with nextjs in functional component.
ClassicEditor: require("#ckeditor/ckeditor5-build-classic"), //working fine
ClassicEditor: require("../ckeditor5/build/ckeditor"), this is not working
this is perfectly working
import React, { useEffect, useState, useRef } from "react";
function Editor() {
let editorRef = useRef();
const { CKEditor, ClassicEditor } = editorRef.current || {};
let [loaded, setLoaded] = useState(false);
useEffect(() => {
editorRef.current = {
CKEditor: require("#ckeditor/ckeditor5-react").CKEditor,
ClassicEditor: require("#ckeditor/ckeditor5-build-classic"), //working fine
};
setLoaded(true);
}, []); // run on mounting
if (loaded) {
return (
<CKEditor
editor={ClassicEditor}
data="<p>Hello from CKEditor 5!</p>"
/>
);
} else {
return <h2> Editor is loading </h2>;
}
}
export default Editor;
But custom builder is not working
import React, { useEffect, useState, useRef } from "react";
function Editor() {
let editorRef = useRef();
const { CKEditor, ClassicEditor } = editorRef.current || {};
let [loaded, setLoaded] = useState(false);
useEffect(() => {
editorRef.current = {
CKEditor: require("#ckeditor/ckeditor5-react").CKEditor,
ClassicEditor: require("../ckeditor5/build/ckeditor"),// this is not working
};
setLoaded(true);
}, []); // run on mounting
if (loaded) {
return (
<CKEditor
editor={ClassicEditor}
data="<p>Hello from CKEditor 5!</p>"
/>
);
} else {
return <h2> Editor is loading </h2>;
}
}
export default Editor;
when i use custom build ckeditor it gives me error.
TypeError: a.clone is not a function
at Array.map (<anonymous>)
please help me integrate ckeditor5 custom build with nextjs. would be appreciated.
The following React code should highlight the component when the children have changed. This highlighting does not always happen when the change happens before the css transaction of the previous change has finished. What can I do about it? Does it have to do with React? Or is it how css works?
import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
import { Box } from "#mui/material";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({
highlight: {
backgroundColor: "yellow",
},
transparent: {
transition: "background-color 5s linear",
},
});
const ChangeHighlight = ({ children }: any) => {
const classes = useStyles();
const [className, setClassName] = useState(classes.transparent);
useLayoutEffect(() => {
setClassName(classes.highlight);
}, [children]);
useEffect(() => {
if (className === classes.highlight) {
setClassName(classes.transparent);
}
});
return <Box className={className}>{children}</Box>;
};
export default ChangeHighlight;
I have a React Native app and am using React Navigation. I am now trying to add screen tracking analytics with firebase.
I am following this documentation, which has this sample code:
import analytics from '#react-native-firebase/analytics';
import { NavigationContainer } from '#react-navigation/native';
<NavigationContainer
ref={navigationRef}
onStateChange={state => {
const previousRouteName = routeNameRef.current;
const currentRouteName = getActiveRouteName(state);
if (previousRouteName !== currentRouteName) {
analytics().setCurrentScreen(currentRouteName, currentRouteName);
}
In my code, however, I am creating my base NavigationContainer with a function like so:
export default createStackNavigator(
{
Home: MainTabNavigator,
SignIn: SignInNavigator,
},
{
transitionConfig: dynamicModalTransition,
headerMode: 'none',
initialRouteName: 'Home',
},
);
What is the best way to integrate the code from the example?
The problem is because you are on react-navigation v4.x.x, but the example you have is for v5.x.x.
In v4, event listeners can be added on AppContainer.
The example below is for v4.
import React from 'react';
import { createAppContainer, createStackNavigator } from 'react-navigation';
function getActiveRouteName(navigationState) {
if (!navigationState) {
return null;
}
const route = navigationState.routes[navigationState.index];
if (route.routes) {
return getActiveRouteName(route);
}
return route.routeName;
}
const nav = createStackNavigator({...});
const AppContainer = createAppContainer(nav);
export default () => {
return <AppContainer
onNavigationStateChange={(prevState, currentState, action) => {
const currentRouteName = getActiveRouteName(currentState);
const previousRouteName = getActiveRouteName(prevState);
if (previousRouteName !== currentRouteName) {
analytics().setCurrentScreen(currentRouteName, currentRouteName);
}
}}
/>
}
I'm using NavigationContainer and createStackNavigator, too and this is how I did it, like in the example for screen tracking at reactnavigation.org
import * as Analytics from 'expo-firebase-analytics';
import { useRef } from 'react';
import { NavigationContainer } from '#react-navigation/native';
export default () => {
const navigationRef = useRef();
const routeNameRef = useRef();
return (
<NavigationContainer
ref={navigationRef}
onReady={() =>
(routeNameRef.current = navigationRef.current.getCurrentRoute().name)
}
onStateChange={async () => {
const previousRouteName = routeNameRef.current;
const currentRouteName = navigationRef.current.getCurrentRoute().name;
if (previousRouteName !== currentRouteName) {
// The line below uses the expo-firebase-analytics tracker
// https://docs.expo.io/versions/latest/sdk/firebase-analytics/
// Change this line to use another Mobile analytics SDK
await analytics().logScreenView({
screen_name: currentRouteName,
screen_class: currentRouteName
});
}
// Save the current route name for later comparison
routeNameRef.current = currentRouteName;
}}
>
{/* ... */}
</NavigationContainer>
);
};
I'm trying to create a simple component, styled with React-JSS:
import React from 'react';
import { createUseStyles, useTheme } from 'react-jss';
import { useSessionState, useSessionDispatch } from '../../../contexts/SessionContext';
const useStyles = createUseStyles({
messageSuccess: {
backgroundColor: 'green'
}
});
const SystemMessage = () => {
const dispatch = useSessionDispatch();
const theme = useTheme();
const classes = useStyles({theme});
return (
<div className={classes.messageSuccess}>
abcd
</div>
);
}
export default SystemMessage;
Upon running it, I get this message:
TypeError: Object(...) is not a function
const useStyles = createUseStyles({
What am I doing wrong?
You should update your react-css version to 10.0.0
This Meteor React code is producing browser console error:
Warning: ListItems(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
Exception from Tracker recompute function:
Any idea why? Thanks
//myList.jsx
import React from 'react';
const renderIfData = (listItems) => {
if (listItems && listItems.length > 0) {
return listItems.map((item) => {
return <li key={item._id}>{item.car}</li>;
});
} else {
return <p> No cars yet!</p>
}
};
export const ListItems = ({listItems}) => {
<ol>{renderIfData(listItems)}</ol>
};
//cars.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { composeWithTracker } from 'react-komposer';
import { ListItems } from '../imports/ui/myList.jsx';
import { CarsCol } from '../imports/api/collections.js';
const composer = (props, onData) => {
const sub = Meteor.subscribe('carsCol');
if (sub.ready()) {
const cars = CarsCol.find().fetch();
onData(null, {cars});
}
};
const Container = composeWithTracker(composer) (ListItems);
ReactDOM.render(<Container />, document.getElementById('react-root'));
Everything looks nice except this part:
return listItems.map((item) => {
return <li key={item._id}>{item.car}</li>;
});
The result of this operation is an array of elements, and React discourages it with exactly the kind of error you're receiving. In fact, in React 16, they promise to allow this, but you're likely using version 15. Anyway, I'd recommend returning a single root element everywhere, so the whole thing would look like
//myList.jsx
import React from 'react';
export const ListItems = ({listItems}) => {
if (listItems && listItems.length > 0) {
return (
<ol>
{listItems.map((item) => (
<li key={item._id}>{item.car}</li>
))}
</ol>
);
} else {
return (
<p>No cars yet!</p>
);
}
};
//cars.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { composeWithTracker } from 'react-komposer';
import { ListItems } from '../imports/ui/myList.jsx';
import { CarsCol } from '../imports/api/collections.js';
const composer = (props, onData) => {
const sub = Meteor.subscribe('carsCol');
if (sub.ready()) {
const cars = CarsCol.find().fetch();
onData(null, {cars});
}
};
const Container = composeWithTracker(composer) (ListItems);
ReactDOM.render(<Container />, document.getElementById('react-root'));