I'm thinking about moving my project to React but there is a road block.
Let me explain.
The project have components (now it's written in php).
If you need to customize on of them you just need to extend the original class of a component and load it from a custom folder.
Example:
The components are located under this directory:
/path/to/core/components/CustomerProfile
If you need to customize something you need to use this directory:
/path/to/custom/components/CustomerProfile
How can I use custom Components in React (and load them from a custom folder)?
Thanks.
import {CustomComponent} from 'relative-path-to-customcomponent'
and do not forget to export the default component.
How to export :
Inside your component file,
export default ComponentName
Related
I have a several React projects where I import some UI-components from a private NPM-package.
This UI-components package is also built using React and styled with Tailwind 3.
The projects where I import the UI-components is using Tailwind 2 and Rollup. I have the abillity to change most of this if it would help.
The CSS of this UI-components package is imported in my projects index.ts file.
(I have access to this NPM package and can change to code there as well)
One of these components is a wrapper-component. That takes in a prop called classes.
import { Wrapper } from 'our-ui-package/components/wrapper';
<Wrapper classes="pt-[30px]">
<Some-children-here />
</Wrapper>
Here I want to be able to send inn Tailwind-classes like pt-3 or even better: send in arbitrary values like pt-[30px].
Now this does not work, as the CSS for the UI-component is created when the NPM-package is build.
Is there any way I can combine the CSS from the UI-components package, as well as add any extra CSS I want to generate by sending these props to the wrapper (or any other component I make that accepts classes as props)?
Appreciate any help. Thank you so much.
Summary:
Importing components that are styled with Tailwind from a NPM-package, and send inn extra Tailwind-classes as props to said compontents, hoping the styling would update.
This does not happen, as the CSS is generated in the NPM-package is already generated when the package is built.
I'm building a react component library (using typescript and styled-components) and I want to reuse as much as possible code between the two targets (web and native).
I have a folder called styled, and inside that folder, I have two index files: index.ts and index.native.ts.
Inside the index.ts I have: export { default as styled } from 'styled-components'; while in the index.native.ts I have export { default as styled } from 'styled-components/native';
I know react-native uses index.native.ts instead index.ts during the build process when it is available but I really need to make the IDE (vscode) to understand that, I mean, when I'm building a Button.native.ts the statement: import { styled } from '../styled' should import from the .native barrel and the ctrl + click should let us to the .native file.
I don't know if there is a configuration to change the default import file used as a barrel, I already tried to search in the typescript documentation for some react-native preset but I didn't find anything.
It is not related to TypeScript, it is an open issue on VSCode GitHub page. Still doesn't have any solution.
Even I didn't find solution on react native vscode plugin.
By my understanding you are working on RNW, so it is not a correct expectation that VSCode understand by Ctrl+CLICK your meaning is Web or Native side.When it works in development and production so forget about opening right code by click.
How do I reuse one AEM SPA project's components in another SPA project? Assuming both projects in this example use the AEM Maven Archetype 25 with React:
Project A has a header component in ui.front-end that has the proper mapping to the AEM component under its ui.apps.
How would I reuse this header component in Project B? It seems like the header component needs to also exist in Project B and be imported into the imported-components.js file to work. If I wanted to instead turn project A into an AEM SPA component library and use those components in Project B. How could I make this work?
If I wanted to instead turn project A into an AEM SPA component library and use those components in Project B.
You can do this - just create project-a as a regular React App and export your components from it, then use it as a dependency in project-b (the ui.frontend part of your AEM project) and map those React components to their AEM counterparts.
Here's an example component from :
const Header = (props) => {
return <h1>{props.title}</h1>
}
export default Header
Then in your project-b you'd do something like:
import {Header} from 'project-a'
import {MapTo} from '#adobe/aem-react-editable-components'
...
MapTo('my-aem-app/components/header')(Header)
I have a large React.js project, for which I have created separate SCSS files for separate React Components. The problem is styles in one component, let's say Component_1, are available in other components.
I have tried using import() the SCSS files within the Componets' componentWillMount() methods.
// instead of this
import "../Styles/_header.scss";
class Header extends React.Component {
// I am trying this
componentWillMount() {
import ("../Styles/_header.scss");
}
}
But I have many functional components, and for that I am seaching an Webpack way or any other way, so that my SCSS files will be only available in the Components from which I am importing... Thanks
I know it will have impact and you will need to refactor, but styled-components is your friend here.
Basically, you add styling on component level. In combination with lazy loading components you only load your component with its styling when the components need to be rendered by React.
You can use this babel plugin to conditionally import things. Also in your functional components you can use the effect hook to replace componentWillMount/componentDidMount.
I want to selectively use semantic-ui-css classes in my components. The problem is that I use PostCSS modules option which scopes locally all the class names for a specific component. When I use semantic-ui-react components, for example a button, it renders element button with classes ui button, but the included css gets scoped locally so instead of button i get button-min_ui__14RRq
I need to do one of two things:
Import Semantic-ui css without the classes being scoped locally
Make Semantic-ui components to use classes that are being scoped locally
For now I see that I have only one option:
import React from 'react';
import { Button } from 'semantic-ui-react'
import semantic from 'semantic-ui-css/components/button.min.css'
export default class Test extends React.Component {
render(){
return (
<Button className={[semantic.ui, semantic.button]}>Click Here</Button>
)
}
}
I'm explicitly stating what classes the button is to use. It works, but I have to do that for every element and it keeps the default classes. So I get ui button button-min_ui__14RRq button-min_button__Uio9b
Is there a way of doing this without it keeping the default classes?
I'm not sure I fully understand the question, but will give it a shot. Should you try excluding the semantic/global styles from PostCSS?
eg. If you are using webpack use 'exclude' in the loader definition.
(it's something we do in one of our the projects where I work)
Laura
you are having similar problem to me.
Making External Library(Semantic ui React) and CSS module work with webpack css-loader
From my understanding,you want to exclude semantic-ui-react-library styling from css module so that it work with your application. You can create multiple rules for css loader to resolve this.
Take a look at this Using Semantic UI With CSS Modules in Webpack
I always use css of a library not the components they provide, I write my own.
So install only semantic-ui-css. Now import like below in your react application.
import ReactDOM from 'react-dom'
import 'semantic-ui-css/semantic.min.css'
import App from './App'
ReactDOM.render(<App/>, document.getElementById('root'))