I am trying to use react-loadable on third party react components. It is just showing blank page. When I used it to code split my own components, it worked fine.
import React from 'react'
import Loadable from 'react-loadable';
const Loading = () => <div>Loading...</div>
const Modal = Loadable({
loader: () => import('react-responsive-modal'),
/*loader: () => import('./My-Own-Component'),//this works fine.*/
loading: Loading
});
class MyTest extends React.Component{
render(){
return(<Modal />)
}
}
export default MyTest
I am sure the way I am using is wrong. Please advise. Thanks.
Just a hunch. Can you try extracting the component inside react-responsive-modal into a custom component and try to see if that works.
I think React loadable is not able to import 3rd party components directly.
Related
I'm trying to get translations from i18n files in my unit testing, I've seen other answers but they work with just one i18n file, My problem is that, I have 2 files and the folder structure is like this,
i18n/en/translation.json
i18n/es/translation.json
and translation.json file is written like this
{... "info":"information", "name":"Name", ...}
doesn't have an export default.
and here is my test file,
import React from 'react'
import '#testing-library/jest-dom'
import {render} from '#testing-library/react'
import AddUsers from '../../components/AddUsers'
test('Render OK',()=>{
const menuLinkUp =false
const component =render(
<AddUsers/>
)
component.getByText(" how can i call my i18n?")
})
I'm using react testing library and jest for doing this.
There is a section in the documentation: https://react.i18next.com/misc/testing.
I would probably mock the react-i18next module, as it requires the least amount of changes.
jest.mock('react-i18next', () => ({
// this mock makes sure any components using the translate HoC receive the t function as a prop
withTranslation: () => Component => {
Component.defaultProps = { ...Component.defaultProps, t: () => "" };
return Component;
},
}));
(If you actually want to "inject" the translations: https://react.i18next.com/misc/testing#example-test-using-this-configuration)
I have this react component. It works just fine for me.
import { Widget } from 'rasa-webchat';
function CustomWidget(){
return (
<Widget
initPayload={"payload"}
socketPath={"/socket.io/"}
customData={{"language": "en"}}
/>
)
}
export default CustomWidget;
But when I try to use it on my next.js website it fails to work.
It gives me a window is not defined error.
I think I resolved this particular error by using the dynamic importer:
import dynamic from "next/dynamic";
const webchat = dynamic(
() => {
return import('rasa-webchat');
},
{ ssr: false }
);
But now I can't figure out how to actually use the widget component from the package.
Am I allowed to import { Widget } from 'rasa-webchat' or is this just not compatible with next.js for some reason? If it's possible, how do I do it?
The syntax for named exports is slightly different. You can use the widget with a dynamic import as follows:
import dynamic from 'next/dynamic';
const Widget = dynamic(
() => import('rasa-webchat').then((mod) => mod.Widget),
{ ssr: false }
);
function CustomWidget(){
return (
<Widget
initPayload={"payload"}
socketPath={"/socket.io/"}
customData={{"language": "en"}}
/>
)
}
export default CustomWidget;
For further details check Next.js dynamic import documentation.
Nextjs is a frame work that allows you to build Static and Server Side rendered apps. So, it uses Nodesj under hood and window is not defined in nodejs. Only way to accessing window in react ssr frameworks is useEffect hook. Your dynamic import solution is right , becuase you are getting file on client side. I hope it makes sense.
Have a great day
I am new to react storybook and have created relatively simple stories so far as mentioned below:
import React from 'react';
import { action } from '#storybook/addon-actions';
export default {
title: "Test"
}
export const test = () => <textarea onClick={action('textarea clicked')}>Hong test from me</textarea>;
export const input = () => <input type="text"></input>;
With this knowledge, I want to go ahead and create complex stories i.e. as shown in the image below:
Is there any tutorial which will help me achieve this.
Thanks
I am not sure if I understood your question correctly, but I will try to give you an answer.
What we usually do with storybook stories is to create the story and then import a complex component inside it.
import React from 'react';
import { storiesOf } from '#storybook/react';
import { CustomComponent } from '../src';
storiesOf('CustomComponent', module)
.add('Custom Component story 1', () => (
<CustomComponent />
));
I'm using React + React-Router + React-loadable for adding a preLoader page before downloading all content of the page.
Here is my code :
AppLoader.js :
import Loadable from 'react-loadable';
import Loading from './preLoader';
import React from 'react';
const LoadableComponent = Loadable({
loader: () => import('./App'),
loading: Loading,
});
export default class App extends React.Component {
render() {
return <LoadableComponent/>;
}
}
preloader.js :
import React from 'react';
import classes from '../../styles/main/preload.less';
let opacityInterval;
export default class PreLoadPage extends React.Component{
render(){
return(
<div className={classes.rootTag}>
Loading...
</div>
);
}
}
I want to show the loading page until the App page is completely ready. and all the images and anything else have been downloaded. maybe it's problem with
the contents that will be given to react by the server. I'm using django-rest-framework for the backend.
How could i tell the loader to wait until the page was completely rendered and then disappear?
Or mayebe :
How could I tell react to complete mounting component after loading all the contents ( including images)?
Right around the time that this question was asked, react released version 16.6.0, which included React.lazy. Additionally, a Suspense component is provided to render a fallback, or loading component/animation.
The following will wait until all content (files/chunks/resources) is retrieved from your server before rendering your lazy loaded component:
const App = React.lazy(() => import('./App'))
const AppWrapper = () => {
return (
<Suspense fallback={<Loading />}>
<App />
</Suspense>
);
};
With that said, it is probably not optimal to lazy load your entire application. The react docs recommend starting by lazy loading each route. This will split your app up into logical chunks. Once you become more comfortable with code-splitting, other places where it makes sense to split your code will become more apparent.
Using Create-react-app, I want to lazy load some of my components, this is working fine as long as the components are in the same folder as my main component (where I define the routes) however as soon as I want to load a component from another folder like
loader: () => import("../containers/HomeAContainer")
it fails to find/import the module. (exact same module will work if I move the file!
I have made a complete example which can be seen here
I have also tried to change the route to src/x/x instead of ../x/x but again getting errors.
You are using a wrong path, correct it by using :
{ path: "/c", component: "./containers/HomeAContainer" }
The way i create lazy loading components is through a higher order component. I create a file called "asyncComponent", then i put in the code:
import React, { Component } from 'react';
const asyncComponent = ( importComponent ) => {
return class extends Component{
state = { component: null }
componentDidMount(){
importComponent().then(cmp =>{
this.setState({component: cmp.default});
});
}
render (){
const C = this.state.component;
return C ? <C {...this.props} /> : null;
}
}
}
export default asyncComponent;
This component will receive a function as a parameter and then return the component you want. The function is actually a import funcion with the path of your component that you want to lazy load.
So instead of using:
import Exemple from './example/example';
You will use:
import asyncComponent from './asyncComponent';
const asyncExample = asyncComponent(()=>{
return import('./example/example');
});