i'm looking for a way to integrate grommet framework to a react app created with the cli.
I want to use react grommet components inside my app but there are some problems with the preprocessor SCSS. Today, I tried to integrate them in a lot of ways, I followed a lot of tutorials but It still doesn't working. Do you know or do you have success to use them together ? Thankss
For Grommet 1.x
If you don't want to add scss to your project, grommet-css is a great alternative. You can install it and import the css into your App.js.
Note that to customize the default theme you have to fork the repo, make changes like including a different default grommet style in index.scss or tweaking grommet scss variables. Then you have to update the name in package.json, run npm build, then run npm publish.
Here is an example using grommet and grommet-css
import React, { Component } from 'react'
import '../../node_modules/grommet-css';
import Heading from 'grommet/components/Heading';
import Box from 'grommet/components/Box';
export default class GrommetExample extends Component {
render() {
return (
<Box>
<Heading>Hello, I'm a Grommet Component styled with <a href='https://www.npmjs.com/package/grommet-css'>grommet-css</a></Heading>
</Box>
)
}
}
Related
I have two libraries of Stencil JS web components, library-a and library-b. These are not apps, just separate npm packages of components.
I would like to use some of the components from library-a inside library-b. How do I import components from A into B?
The StencilJS docs offer some import instructions but don't cover this particular use case.
Basically all you have to do is npm install (or npm link) the project and import it.
As far as I know there are two places you can include the import:
Inside a global app.ts which is configured as a globalScript in stencil.config.ts.
Inside the root component.
In your case the second option probably won't work since component libraries usually don't have a root component.
Import inside app.ts:
First, create a global script and configure it in your stencil.config.ts:
export const config: Config = {
// ...
globalScript: 'src/global/app.ts',
};
Then add the import inside that file. Example for Ionic Framework:
import '#ionic/core';
Now you can use the components just like any other HTML element.
I have seen that it is used
import React from 'react';
import './cssName.css';
but it does not work for me, I am working on the electron app and add react as shown here
https://reactjs.org/docs/add-react-to-a-website.html
It is not working because you do not have a build process set up. You will need to setup webpack or something like that to be able to import css.
I suggest you read this article: https://flaviocopes.com/react-electron/.
Building a package with UI components using CSS modules. Each component is totally separated from others and includes CSS styles like this:
import css from './styles.css'
const Component = () => {
return (
<div className={css.container}>Hello there!</div>
)
}
export { SearchBar }
In another package based on Next.js I want import a component like this:
import { Component } from '#me/components'
But Next.js doesn't allow Module CSS import from node_modules.
My question is how can I build the component package with CSS transformed into JS. It shouldn't be merged into one file just like Webpack do. Instead it should build each component separately. Also I don't want to import a huge CSS files with all styles merged into single file. Easiest way would be to use CSS-in-JS, but I want to use PostCSS written in CSS files.
I tried to develop my first Shopify module but when i use React i have this error in my application page on the shop.
Here my index.js
import {Page} from "#shopify/polaris";
import {RessourcePicker} from "#shopify/app-bridge-react";
class Index extends React.Component{
state = {open: false}
render() {
return (
<Page
title="Product selector"
primaryAction={{
content:'Select products',
onAction: () => this.setState({open:true})
}}
>
<RessourcePicker
ressourceType='Product'
open={this.state.open}
/>
</Page>
)
}
}
export default Index;
Shopify allows its users to determine their own React version, hence Shopify wouldn't deploy React for you and lock you on a version you might not be interested in using. You can see how Shopify defines React as a peer-dependency so the responsibility of deploying and importing React is on the user.
I think that in your case, what you might be missing is deploying React as a dependency on your package.json, and import it as follows:
import React, { Component } from "react";
I ran into the same issue with their tutorial, I went in to the package.json and changed the dependency,
"react": "^16.9.0",
"react-dom": "^16.9.0"
Then I went to my terminal and installed react again:
npm install next react react-dom
now its working fine.
You do not need to add the import.
You should use
import React from "react";
To be safe from this type of errors. If any of your previously defined imports do import React import React will not work.
But I recommend it to just be safe
I want to display the Root component inside my html file. I'm aware on how to do it with es5 using ReactDOM.render(<Root/>, document.getElementById('app')) but what about for es6?
Here's my html file:
<div id="app"></div>
Here's my js file:
import React, { Component } from 'react';
class Root extends Component {
render() {
return(
<div>
<h1>Testing</h1>
</div>
);
}
}
ReactDOM.render(<Root/>, document.getElementById('app'));
My attempt above the es5 way because I wasn't quite sure how to make this happen in es6, this obviously isn't working.
Note: I'm not using create-react-app for my project. I'm just trying things out outside of create-react-app environment and instead, onto other environments. I installed Babel and all the other stuff manually.
What can I do to make it work?
It looks like you're missing an import statement for the React DOM, because you will need it to render components to the DOM from React, unless you're importing those components from separate files.
import ReactDOM from "react-dom"
Add that after your first import statement.