is there a way to find out where a react component is used in other components?
for example:
navbar components is used in app.js
import React from 'react';
const Navbar = () => {
return <div>this is Navbar</div>;
};
export default Navbar;
import React from 'react'; import Navbar from './Navbar';
const App = () => {return (<div><Navbar /></div>); };
export default App;
There's two ways to find:
React Developer Tools extension (recommended) tool for debugging. It has a Search bar (text or/regex/)
Most of IDE/Code editors now days has the ability to help you find out component usage
Cheers and I hope this helps
Most IDEs should be able to find references to the component.
Otherwise, a simple search should find it.
Related
I made a workaround for named Lazy imports in React I want someone to check if this is actually working as lazy import or not.
Toast.js
import { ToastContainer } from "react-toastify";
export default ToastContainer;
App.js
const ToastContainer = React.lazy(() => import("../main/shared/toast"));
return(
<Suspense fallback={null}>
<ToastContainer />
</Suspense>
);
As React official documentation said "currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that tree shaking keeps working and that you don’t pull in unused components."
https://reactjs.org/docs/code-splitting.html
It is working as a lazy component you export this as a default component in 2nd line
The accepted answer, and the documentation that it refers to, are slightly misleading.
lazy() expects a thenable function, meaning that you can load your module and then select which named export you want to import. Using your example, that would become:
React.lazy(async () => {
return {
default: (import("../main/shared/toast")).ToastContainer
}
})
I have set up deep linking in my project with react-navigation. It is successfully working in android. But in ios, it is opening the app successfully but does not route to the correct location.
this is how I code it with react-navigation.
import 'react-native-gesture-handler';
import * as React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {Linking} from 'react-native';
import AppStackNavigator from '_navigations/AppStackNavigator';
import I18n from 'i18n-js';
export default function App() {
const linking = {
prefixes: ['https://mydomain/meeting','myapp://meeting'],
config: {
screens: {
login: 'login/:data',
},
},
};
return (
<NavigationContainer linking={linking} >
<AppStackNavigator />
</NavigationContainer>
);
}
As this one is not working then I tried it with getInitialState using use linking hook. Then the initial state was always undefined. I do not have any idea to fix this. I tried almost all the examples I was able to find to fix this issue. But I was unable to do so. If someone can help me to fix this it is really really grateful. Thank you.
react-navigation:"^5.2.16",
react:"16.11.0"
react-native:"0.62.2"
ios:14.2
xcode: 12
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've just updated a from a class based to a functional component.
When I look in React's DevTools, I'd usually see my component named Gallery with all the named state variables.
Now though, All I see is a component named _default with a bunch of non-descriptive State: definitions.
From other answers, I've read that React Dev Tools now supports hooks but I've not seen any examples of the component name being wrong.
Is this normal behaviour or is there something I'm doing wrong?
Versions
React 16.9.0
React Developer Tools Chrome extension: 4.1.1
Also getting the same issue in Firefox.
Component code
// The component
import React, { useState, useEffect } from 'react';
const Gallery = ({ images, layout }) => {
const [showLightbox, toggleLightbox] = useState(false);
const [activeImage, setActiveImage] = useState(false);
return (
// Some JSX here
)
};
Render code
// Rendering the component
import React from 'react';
import { render } from 'react-dom';
import Gallery from '../../global/scripts/components/Gallery';
render(
<Gallery images={images} />,
document.getElementById('image-gallery'),
);
Devtools screenshot
Try adding a displayName to your component before export. Check the following link for reference.
DisplayName
Use it like Gallery.displayName = 'Gallery'
I want to do this
in src/modules/layout/nav.js
...
export default NavBar;
in src/modules/layout/side.js
...
export default sideBar;
in src/modules/layout/index.js
import NavBar from './nav';
import sideBar from './side';
export { NavBar, sideBar };
in src/modules/index.js
import * from './layout';
The last bit does not work. According to the tutorial I would then be able to go to src/App.js and use the navBar as so:
import {navBar} from './modules';
But the fact that * does not work I can't do that. Is there any alternative without having to go like this
in src/modules/index.js
import * as All from './layout';
export All;
Then in App.js, go All.navBar. That feels ugly
Well, I have gone through what you have; I feel what you actually needed is to understand the reason for doing that. I am pretty sure what you want to achieve is to have your components imported from a single file rather than from the files where the components were exported.
You don't want to do this:
import NavBar from 'src/modules/layout/NavBar';
import SideBar from 'src/modules/layout/SideBar';
But what you want is to import all your components from a single file wherever you would want to use them.
So, if that is the case, you don't need to add more complexities. All you just need to do is:
// export the components like this
export default NavBar;
export default SideBar;
// Then, in your src/modules/layout/index.js file, import // the components you exported just the way you did it
import NavBar from './NavBar';
import SideBar from './SideBar';
export {
NavBar,
SideBar
}
// Hence, wherever you need both components, you can easily do this:
import { NavBar, SideBar } from '../index.js'
// From the above, you are just importing both components from the index.js file.
So, I believe that answers your question.
Just to add to Onyekachi Samuel's answer and to answer the all part of the title:
After creating the src/modules/layout/index.js file as he described, you can import all by:
import * as All from './layout'
And use the exported components:
<All.NavBar/> <All.SideBar/>
For instance:
// Folder structure:
// |-App.js
// |-Layout
// |-NavBar.js
// |-SideBar.js
// |-index.js
// App.js in the same location as Layout folder
import React from 'react';
import * as All from './layout'
export default function App(props) {
return (<div>
<All.NavBar/>
<All.SideBar/>
</div>)
}
Hope this might clarify it for some.