react-awesome-query-builder made on material v4 and it makes style conflicts with MUI v5
and I am using MUI v5 and when I remove MaterialConfig everything works very well.
thank you in advance.
how can I use react-awesome-query-builder with MUI v5?
import React, { useState } from "react";
import { Query, Builder, Utils as QbUtils } from "react-awesome-query-builder";
import MaterialConfig from "react-awesome-query-builder/lib/config/material";
import "react-awesome-query-builder/lib/css/styles.css";
import "react-awesome-query-builder/lib/css/compact_styles.css";
import PublicTitle from "publicComponent/publicTitle";
import {Box} from "#mui/material"; //optional, for more compact styles
const InitialConfig = MaterialConfig; // or MaterialConfig or BasicConfig
// You can load query value from your backend storage (for saving see `Query.onChange()`)
const queryValue = { id: QbUtils.uuid(), type: "group" };
const QueryBuild = () => {
const [state, setState] = useState({
tree: QbUtils.checkTree(QbUtils.loadTree(queryValue), config),
config: config
});
return (
<div>
<PublicTitle title="Query Building"/>
<div className="query-builder-result mb-3 mt-4">
<Box className="group group-or-rule p-3">
<p>
Result:
</p>
<pre style={{fontSize:"1rem"}}>
{JSON.stringify(QbUtils.queryString(state.tree, state.config))}
</pre>
</Box>
</div>
<Query
{...config}
value={state.tree}
onChange={onChange}
renderBuilder={renderBuilder}
style={{padding: "0"}}
/>
</div>
);
};
export default QueryBuild;
finally, I used
import MaterialConfig from "react-awesome-query-builder-pd/lib/config/material";
to resolve my problem
In my own case, I had to use
import MuiConfig from 'react-awesome-query-builder/lib/config/mui';
And the theme in the config:
theme: {
mui: theme(myThemeColors)
}
Related
I'm using the very basic version of React quill bot like below
import React,{useState} from 'react';
import TextEditor from '../common/TextEditor';
function PageEdit(props) {
const [value, setValue] = useState('This is the value intially');
console.log("value", value)
return (
<div className='horizontal--center' style={{width:"50vw"}}>
<TextEditor value={value} setValue={setValue}/>
</div>
);
}
export default PageEdit;
import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
function TextEditor({value, setValue}) {
const modules = {
// #3 Add "image" to the toolbar
toolbar: [["bold", "italic", "image"]],
}
return (
<ReactQuill theme="snow" value={value} onChange={setValue} modules={modules} />
);
}
export default TextEditor;
I want to add an image at a specific point(where the cursor is active), using a button that calls an external api. Any way to achieve this?
Hi I'm creating a Teams App and im having trouble implementing a DatePicker in one of my screen.
My basic test screen:
import React from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export default function TestScreen() {
let [selectedDate, setSelectedDate] = useState("");
return(
<div>
<h1>TEST SCREEN</h1>
<div>
<DatePicker
selected={selectedDate}
onChange={date => setSelectedDate(date)}
/>
</div>
</div>
)
}
the tab component:
import React from "react";
// https://fluentsite.z22.web.core.windows.net/quick-start
import { Provider, teamsTheme } from "#fluentui/react-northstar";
import { HashRouter as Router, Redirect, Route } from "react-router-dom";
import Tab from "./Tab";
import "./App.css";
import { useTeams } from "#microsoft/teamsfx-react";
import "bootstrap/dist/css/bootstrap.min.css"
import TestScreen from "./screens/test";
export default function App() {
const { theme } = useTeams({})[0];
return (
<Provider theme={theme || teamsTheme} styles={{ backgroundColor: "#eeeeee" }}>
<Router>
<TestScreen />
</Router>
</Provider>
);
}
[The error I get][1]
[1]: https://i.stack.imgur.com/Sc7cX.png
For those wondering, I fixed my issue replacing the by a simple . Not the solution i wanted to use at first but at least it's working fine. Might be a compatibility issue between Teams toolkit, React and some packages..
I see you haven't imported useState in your file. Also add current date as the default value of the selectedDate state. Try this
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export default function TestScreen() {
let [selectedDate, setSelectedDate] = useState(new Date());
return(
<div>
<h1>TEST SCREEN</h1>
<div>
<DatePicker
selected={selectedDate}
onChange={date => setSelectedDate(date)}
/>
</div>
</div>
)
}
In case you're still not able to use it check if you're using an older version of react. Since hooks are supported in React 16.8.0 or higher.
I followed the doc of SunEditor, it's like:
import React from 'react';
import dynamic from "next/dynamic";
import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File
const SunEditor = dynamic(() => import("suneditor-react"), {
ssr: false,
});
const MyComponent = props => {
return (
<div>
<p> My Other Contents </p>
<SunEditor />
</div>
);
};
export default MyComponent;
It works well, but when I add setOptions into SunEditor:
import { buttonList } from "suneditor-react";
...
<SunEditor
setOptions={{buttonList:buttonList.complex}}
/>
I got this error:
SyntaxError: Cannot use import statement outside a module
Am I missing something, and how can I fix it?
For the same reason you have to dynamically import SunEditor, you also have to dynamically import buttonList.
One approach is to create a custom component where you add all the suneditor code.
import React from 'react';
import SunEditor, { buttonList } from 'suneditor-react';
const CustomSunEditor = () => {
return <SunEditor setOptions={{ buttonList: buttonList.complex }} />;
};
export default CustomSunEditor;
Then, dynamically import that component with next/dynamic where needed.
const CustomSunEditor = dynamic(() => import('../components/CustomSunEditor'), {
ssr: false,
});
const MyComponent = props => {
return (
<div>
<p> My Other Contents </p>
<CustomSunEditor />
</div>
);
};
I want to display Google Adsense on my gatsby.js site. However, it is not showing up.
LeftSideSection is called in Layout.js.
I am running it in a local environment.
And I don't have a domain for my site.
I don't register my site's domain in GoogleAdsense and
I have created an Ad unit.
export
[
googleAdsense.js
import React from "react"
import * as styles from "./LeftSideSection.module.css";
import {Adsense} from './googleAdsense'
import React, { useEffect } from 'react'
export const Adsense = ({ path }) => {
useEffect(() => {
;(window.adsbygoogle = window.adsbygoogle || []).push({})
}, [path])
return (
<ins
className="adsbygoogle"
style={{ "display": "block" , textAlign: "center",width:`100%` ,height:`100%`}}
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="xxxxxxx"
data-ad-format="auto"
data-full-width-responsive="true"
data-adtest="on"
/>
)
}
LeftSideSection.js
const LeftSideSection = (props) => {
const { title, children } = props;
const path = props.location?.pathname || '';
return (
<section className={styles.container}>
<p>ads</p>
<Adsense path={path} />
</section>
);
};
export default LeftSideSection;
Layout.js
import React from "react";
import Header from "./Header";
import * as styles from "./Layout.module.css";
import 'bootstrap/dist/css/bootstrap.min.css';
import herderImage from '../images/header.png'
import {Navbar} from 'react-bootstrap'
import RightSideSection from "./RightSideSection";
import LeftSideSection from "./LeftSideSection";
import { Link } from "gatsby";
import { useBreakpoint } from 'gatsby-plugin-breakpoints';
import HeaderRss from "./HeaderRss";
const Layout = ({ children }) => {
const breakPoints = useBreakpoint();
return (
breakPoints.pc ?
<>
<Navbar.Brand as={Link} href='/' >
<img src={herderImage} style={{width:`100%`,height:`200px`,}}/>
</Navbar.Brand>
<Header />
<div className={styles.container}>
<div className={styles.LeftSideSection}>
<LeftSideSection />
</div>
<div className={styles.RightSideSection}>
<RightSideSection />
</div>
<div className={styles.mainPane}>
<div className={styles.headerRssContainer}>
<HeaderRss/>
</div>
{children}
</div>
</div>
<footer className={styles.footer}>
© {new Date().getFullYear()},
{`title`}
</footer>
</>:
);
};
export default Layout;
enter image description here
You are not loading the <script> that the console is suggesting. Try using the Helmet component to do something like:
import React from "react"
import * as styles from "./LeftSideSection.module.css";
import {Adsense} from './googleAdsense'
import React, { useEffect } from 'react'
export const Adsense = ({ path }) => {
useEffect(() => {
;(window.adsbygoogle = window.adsbygoogle || []).push({})
}, [path])
return <>
<Helmet>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</Helmet>
<ins
className="adsbygoogle"
style={{ "display": "block" , textAlign: "center",width:`100%` ,height:`100%`}}
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="xxxxxxx"
data-ad-format="auto"
data-adtest="on"
data-full-width-responsive="true"
/>
</>
}
I still don't know what's import {Adsense} from './googleAdsense', this line may collide with the naming of the component that you are defining (both are Adsense). If the issue persists, try changing the name.
To make the ads available on localhost, set the data-adtest as on.
In addition, you can try using a React-based solution like the one that react-adsense suggests.
Double-check and remove AdBlocks (or similar).
However, the image of the ad did not show up.
This can be caused by the localhost. Try deploying the site to check it in a real domain.
I am trying to create a custom hook to be able to open and close a pop-out menu with conditional rendering using style display: none and display:block. I think I understand how to share the state between the components (I can console log that and get that working) , but I can not figure out how to update the state using the hook.
I am certain that I have some fundamental misunderstanding here but if anyone can clarify what it is I am trying to achieve that would be awesome! I have tried to learn this for several nights and here is where I have got to.
This is the header of the pop out menu it only contains a close button at the moment
import React from 'react'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faWindowClose } from '#fortawesome/free-solid-svg-icons'
import useOpenCloseElementMenu from '../Hooks/openCloseElementMenu'
function ElementMenuHeader() {
const { elementMenuOpenClose, setElementMenuOpenClose } = useOpenCloseElementMenu();
return (
<div id="App-Close-Element-Menu-Container">
<button id="App-Close-Element-Menu"
onClick={() => setElementMenuOpenClose(false) }
>
<FontAwesomeIcon icon={faWindowClose} />
</button>
</div>
);
}
export default ElementMenuHeader
This is the pop out menu
import React from 'react';
import SizerGroup from '../Sizer/sizerGroup';
import './element-menu.css';
import ElementMenuHeader from './element-menu-header';
import TitleWithLine from './title-with-line';
import TypeSelector from './type-selector';
import TemplateSelector from './template-selector';
import useOpenCloseElementMenu from '../Hooks/openCloseElementMenu'
function Editor(props) {
const { elementMenuOpenClose, setElementMenuOpenClose } = useOpenCloseElementMenu();
console.log(elementMenuOpenClose);
return (
<div className="App-Element-Menu"
style={{display: elementMenuOpenClose ? 'block' : 'none' }}
>
<ElementMenuHeader />
<TitleWithLine title="Element size" />
<SizerGroup />
<TitleWithLine title="Elements" />
<TypeSelector />
<TitleWithLine title="Templates" />
<TemplateSelector />
</div>
);
}
export default Editor
This is the toolbar that has the open menu button
import React from 'react'
import Button from '../Button/button'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faBoxes } from '#fortawesome/free-solid-svg-icons'
import './toolbar.css'
import useOpenCloseElementMenu from '../Hooks/openCloseElementMenu'
function Toolbar(props) {
const { toolbar_show_or_hide } = props
const elementMenuIcon = <FontAwesomeIcon icon={ faBoxes } />
const { elementMenuOpenClose, setElementMenuOpenClose } = useOpenCloseElementMenu();
const openEditor = setElementMenuOpenClose[true]
return (
<div className="App-Toolbar" style={{ display: toolbar_show_or_hide ? "flex" : "none" }} >
<Button
id="App-Open-Element-Menu-Button"
icon={ elementMenuIcon }
useToolTip={ true }
toolTipText="Elements menu. Select elements to populate the theme."
buttonFunction={ openEditor }
/>
</div>
)
}
export default Toolbar
This is the hook
import React, { useState } from 'react';
const useOpenCloseElementMenu = () => {
const [elementMenuOpenClose, setElementMenuOpenClose] = useState(false);
return { elementMenuOpenClose, setElementMenuOpenClose };
};
export default useOpenCloseElementMenu;
I feel you donot have to pass the hook in a separate function, useOpenCloseElementMenu, like you did.
Instead of importing the ../Hooks/openCloseElementMenu function thing,
I'd rather just call the hooks directly instead as
const [elementMenuOpenClose, setElementMenuOpenClose] = useState(false);
in the editor and toolbar component in place of const { elementMenuOpenClose, setElementMenuOpenClose } = useOpenCloseElementMenu();.
Also which component did you use the toolbar component if I may ask? Because I don't seem to see any of that here...It confusing where it got the toolbar_show... props from.
{I hope this helps cause that seem like the most obvious reason}