I am trying to integrate Material Ui with meteor and as a sample test tried executing the below but ended up with errors and no Idea how to resolve it. Anyone there to assist me in fixing this. Below are few detail to track.
How I installed ? --> meteor npm install #material-ui/core
How I Integrated code? Through Blaze React component
ExampleTest.js
Template.ExampleTest.helpers({
ExampleContainer() {
return ExampleContainer;
}
});
ExampleContainer.js
const ExampleContainer = withTracker(() => {
---------
})(Example);
Example.js
import React, { Component } from "react";
import { Button } from "#material-ui/core";
class Example extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Button color="primary">Hello World</Button>
</div>
);
}
}
export default Example;
What error did I receive ?
Error: In template "ExampleTest", call to `{{> React ... }}` missing `component` argument.
at Blaze.View.<anonymous> (react-template-helper.js?hash=3fb2a2954362a4acdee8150fb77f0f500dd28206:67)
at blaze.js?hash=cbd85c3fe14949f2d2b9a3b76334f5f0e96d553c:1934
at Function.Template._withTemplateInstanceFunc (blaze.js?hash=cbd85c3fe14949f2d2b9a3b76334f5f0e96d553c:3769)
at blaze.js?hash=cbd85c3fe14949f2d2b9a3b76334f5f0e96d553c:1932............
Any assistance on this ?
It looks like you're using Blaze template engine. You should use React instead.
https://www.meteor.com/tutorials/react/components
Material UI is a UI framework for use with React. It doesn't work with Blaze, and I don't think there is any way to use both Blaze and React in the same page.
To add Material UI to a Meteor/React project, install the package from the command line:
npm install #material-ui/core
And include the Roboto font in the head of your HTML:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
For me this just worked, with nothing special needed for Meteor.
More instructions here: https://material-ui.com/getting-started/installation/
Related
I want to use the Swiper component - https://swiperjs.com/vue#usage using Composition API on Vue^3.2.31
I can get the basic swiper working, but I cannot get Pagination (or any other module) to work.
<template>
<swiper :slides-per-view="1" :pagination="true">
<swiper-slide>Foo</swiper-slide>
<swiper-slide>Bar</swiper-slide>
</swiper>
</template>
<script setup lang="ts">
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css/pagination";
import "swiper/css";
</script>
The examples on the page focus on Options API. I'm not familiar enough with translating from Options to Composition to be able to follow the documentation on how to get Pagination working.
I tried import { Pagination } from "swiper"; but I don't know how to get the "swiper/vue" to use it.
The documentation says "By default Swiper Vue.js uses core version of Swiper (without any additional modules). If you want to use Navigation, Pagination and other modules, you have to install them first."
How do I install and use them in Composition API?
To install additional modules, you just need to pass them as the props of swiper
<template>
<swiper :modules="modules" :slides-per-view="1" :pagination="true">
<swiper-slide>Foo</swiper-slide>
<swiper-slide>Bar</swiper-slide>
</swiper>
</template>
<script setup lang="ts">
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination } from 'swiper';
// define your modules list here
const modules = [Pagination]
</script>
I'm running into a weird problem. I'm using NextJS for its server-side rendering capabilities and I am using ReactQuill as my rich-text editor. To get around ReactQuill's tie to the DOM, I'm dynamically importing it. However, that presents another problem which is that when I try to access the component where I'm importing ReactQuill via a anchor link is not working but I can access it via manually hit the route. Here is my directories overview,
components/
crud/
BlogCreate.js
pages/
admin/
crud/
blog.js
index.js
blogs/
index.js
In my pages/admin/index.js
...
<li className="list-group-item">
<Link href="/admin/crud/blog">
<a>Create Blog</a>
</Link>
</li>
...
In my pages/admin/crud/blog.js
import BlogCreate from "../../../components/crud/BlogCreate";
...
<div className="col-md-12">
<BlogCreate />
</div>
In my components/crud/BlogCreate.js
import dynamic from "next/dynamic";
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import "../../node_modules/react-quill/dist/quill.snow.css";
...
<div className="form-group">
<ReactQuill
value={body}
placeholder="Write something amazing..."
onChange={handleBody}
/>
</div>
in order to use import "../../node_modules/react-quill/dist/quill.snow.css" in components/crud/BlogCreate.js I use #zeit/next-css and here is my next.config.js
const withCSS = require("#zeit/next-css");
module.exports = withCSS({
publicRuntimeConfig: {
...
}
});
Problem
when I click the Create Blog it should be redirect me http://localhost:3000/admin/crud/blog but it just freeze.
But if I manually hit http://localhost:3000/admin/crud/blog then it go to the desire page and work perfect.
And as soon as I manually load that page then Create Blog works. Now I really don't understand where is the problem? Because it show no error that's why I haven't no term to describe my problem that's why I give all the nasty code and directories which I suspect the reason of this error.
It's hard to give you any solution without seeing the entire project(As you mentioned that it shows no error).
You may remove the #zeit/next-css plugin because Next.js 9.3 is Built-in Sass Support for Global Stylesheets. You can use it for css also.
Create a pages/_app.js file if not already present. Then, import the quill.snow.css file:
import "../../node_modules/react-quill/dist/quill.snow.css";
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
If it gives any error then you can create a directory/file to copy-paste the quill.snow.css code in that file.
pages/
_app.js
styles/
quill_style.css
Then import the file in _app.js like,
import "../styles/styles_quill.css";
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
Eventually you can import your custom gobal css here also.
If although the problem remains then provide your git repository. happy coding ✌️
First: remove your #zeit/next-css setup not needed anymore since next.js version 10.
Second: update nex.js to version 10 you could then use regular import on your modules.
import "../../node_modules/react-quill/dist/quill.snow.css";
By the way, I had the same issue with your Nextjs course. ;)
I want to create copy to clip board using react js but i design like
textbox with in contain 'copy' word ,when i click this copy word it changed to be copied
and the textbox value will be copied
You can do this by using ref, document.execCommand('copy').
import React from 'react';
class CopyExample extends React.Component {
constructor(props) {
super(props);
this.state = { copySuccess: '' }
}
copyToClipboard = (e) => {
this.textArea.select();
document.execCommand('copy');
e.target.focus();
this.setState({ copySuccess: 'Copied!' });
};
render() {
return (
<div>
{
document.queryCommandSupported('copy') &&
<div>
<button onClick={this.copyToClipboard}>Copy</button>
{this.state.copySuccess}
</div>
}
<form>
<textarea
ref={(textarea) => this.textArea = textarea}
value='Some text to copy'
/>
</form>
</div>
);
}
}
export default CopyExample;
For clipboard interaction in React, I use clipboard-polyfil. It is nice because it provides polyfills to work on all browsers, which some of the native clipboard functions do not, such as document.execCommand("copy") and navigator.clipboard.write().
The easiest way to use this package with react is to make a custom component, pass in the string you would like to copy as a prop, and copy it using clipboard.writeText(this.props.stringValue);
Personally, I'm using react-copy-to-clipboard
1- install it using npm:
npm install --save react react-copy-to-clipboard
2- import it to your file:
import {CopyToClipboard} from 'react-copy-to-clipboard';
3- now you can wrap your component with <CopyToClipboard> component
it also provide onCopy optional callback function.
resources: CopyToClipboard repo on github
Greetings fellow meteorites!
I am in the process of including material ui (react based) into an existing blaze app. I'm using the meteor guide and the material-ui docs as my instructions to do this properly but unfortunately to no avail. Has anyone successfully done this before? According to the material-ui docs you are supposed to inject an MuiThemeProvider into your main App Component but I keep getting the following error:
MuiThemeProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
Here is my root blaze html template:
<template name="main">
<head>...</head>
<body>
<div id="wrap">
<div id="react-app-wrapper">
{{> React component=App}}
</div>
</div>
</body>
</template>
Notice I am using https://guide.meteor.com/react.html#react-in-blaze as my guidelines and am using the meteor package react-template-helper.
Here is my main.js file:
if(Meteor.isClient){
import App from './users/client/ui/components/App.js';
Template.main.onCreated(function(){
});
Template.main.helpers({
'App' : function(){
return App;
}
}
And my App.js Component File:
import React, { Component, PropTypes } from 'react';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
const lightMuiTheme = getMuiTheme(lightBaseTheme);
export default class App extends Component{
constructor(props){
super(props);
}
render() {
return (
<div>
<MuiThemeProvider muiTheme={lightMuiTheme} >
</MuiThemeProvider >
</div>
);
}
}
Appreciate your help big time! I have tried everything and feeling pretty stumped right now. :( If you give the correct answer I will obviously mark it as so!
Alex
This is how MuiThemeProvider renders
render() {
return this.props.children;
}
And therefore it, React actually, complained of nothing to render since this is you use it.
render() {
return (
<div>
<MuiThemeProvider muiTheme={lightMuiTheme} >
{/* There should be something here. */}
</MuiThemeProvider >
</div>
);
}
Start to put some contents that it can serve for you.
A side notice here is that the outer <div> wrapper can be dropped on the premise that it is not of some particular use.
Good luck!
I'm using the Accounts UI meteor package in my React + Meteor project and want to render the loginButtons template with the property align="right". In Blaze the code would just be {{> loginButtons align="right"}}, but I'm at at a loss with how to add this property in React.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Template } from 'meteor/templating';
import { Blaze } from 'meteor/blaze';
export default class AccountsUIContainer extends Component {
componentDidMount() {
this.view = Blaze.render(Template.loginButtons, // How do I give loginButtons `align="right`?
ReactDOM.findDOMNode(this.refs.container));
}
componentWillUnmount() {
Blaze.remove(this.view);
}
render() {
return <span ref="container" />;
}
}
I think Blaze.renderWithData() may be part of the solution, but my tests with this method haven't worked so far. I also think people have created solutions to using Blaze templates in React before, but I'm not sure these alternate solutions would be the "right" way to solve this problem in Meteor 1.4.
The answer was right inside the documentation. First meteor add gadicc:blaze-react-component, then in the component
import React from 'react';
import Blaze from 'meteor/gadicc:blaze-react-component';
const App = () => (
<div>
<Blaze template="loginButtons" align="right" />
</div>
);