Can you explain me the problem that I have in my code...I am trying to get grapesjs editor into my code...Can anyone help me out on this one??
import React, {useState, useEffect} from 'react';
import grapesjs from 'grapesjs';
import Basics from "grapesjs-blocks-basic"
import BaseReactComponent from "../../base-react-component";
import ReactComponents from "../../react-components";
import MuiComponents from "../../mui-components/index"
import Listing from '../../Listing';
import {Button, Slider, Snackbar} from "#material-ui/core"
import MuiButton from "mui-button";
const EditStepUI = (props) => {
const [editor, setEditor] = useState(true)
useEffect(() => {
const editor = grapesjs.init({
container: "#gjs",
height: "100%",
storageManager: false,
noticeOnUnload: false,
plugins: [Basics, BaseReactComponent, ReactComponents, MuiComponents]
});
console.log(editor);
}, [])
return (
<div id="editor">
editor.setComponents(`
<div>
<span>
Foo
</span>
<Listing>
<div>
Bar
</div>
<MuiButton variant='contained' color='primary'>
Click Me
</MuiButton>
<Slider />
</Listing>
<Snackbar>
<MuiButton variant='contained' color='secondary'>
Click Me
</MuiButton>
</Snackbar>
<Slider />
</div>
`);
</div>
)
}
export default EditStepUI;
Related
I added an OnClick event in a custom component created by me, but it didn't work. I want to add an OnClick event to this component. When i click it, it will play a youtube video below. Is it not possible to do this?
Here is my code:
import React, { useState } from "react";
import classes from "./Feature.module.css";
import { ButtonHorizontal, ButtonCircular } from "./Buttons";
function Feature() {
const [open, setOpen] = React.useState(false);
const openVideo = () => {
setOpen((prev) => !prev);
};
return (
<div>
<ButtonHorizontal icon={faPlay} text="Watch Video" onClick={openVideo}/>
{open ? (
<iframe
src="https://www.youtube.com/watch?v=k2qgadSvNyU"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen
title="video"
/>
) : null}
</div>
);
}
export default Feature;
And buttons.js:
import React from "react";
import classes from "./Buttons.module.css";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { faPlay} from "#fortawesome/free-solid-svg-icons";
export function ButtonHorizontal(props) {
return (
<div className={classes.buttonHorizontal}>
<FontAwesomeIcon icon={props.icon} className={classes.icon}/>
<div className={classes.text}>{props.text}</div>
</div>
);
}
You need to attach the onClick property to an actual HTML element. Something like <div className={classes.buttonHorizontal} onclick={props.onClick}> should work.
import React from "react";
import classes from "./Buttons.module.css";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { faPlay} from "#fortawesome/free-solid-svg-icons";
export function ButtonHorizontal(props) {
return (
<div className={classes.buttonHorizontal} onclick={props.onClick}>
<FontAwesomeIcon icon={props.icon} className={classes.icon}/>
<div className={classes.text}>{props.text}</div>
</div>
);
}
I am trying to use matrial ui elements,but my issue is that it is not responsive. I want to show 2
items on medium screen and just 1 on small ones, but it is 3 on all screens. thx
this is the parent component and I prop drill the array's elements to the child component
import * as React from "react";
import Box from "#mui/material/Box";
import ImageList from "#mui/material/ImageList";
import ImageListItem from "#mui/material/ImageListItem";
import ImageListItemBar from "#mui/material/ImageListItemBar";
import InfiniteScroll from "react-infinite-scroll-component";
import Grid from "#mui/material/Grid";
import ProductListItem from "./ProductListItem";
const ProductList = ({ products }) => {
return (
<>
<div className="mr-5 ml-5">
<Box>
<ImageList variant="masonry" cols={3} gap={18}>
{products.map((item) => (
<ProductListItem
item={item}
key={item.id}
/>
))}
</ImageList>
</Box>
</div>
</>
);
};
export default ProductList;
this is the child component for each element of array
import React, { useState, useEffect } from "react";
import Heart from "react-heart";
import { useLocalStorage } from "./storage.js";
import ImageListItem from "#mui/material/ImageListItem";
import ImageListItemBar from "#mui/material/ImageListItemBar";
import ImageList from "#mui/material/ImageList";
const ProductListItem = (props) => {
return (
<>
<ImageListItem>
<img
src={`${props.item.img_src}?w=248&fit=crop&auto=format`}
srcSet={`${props.item.img_src}?w=248&fit=crop&auto=format&dpr=2 2x`}
alt={props.item.title}
loading="lazy"
/>
<div style={{ width: "2rem" }} className="ml-2 mt-2">
<Heart />
</div>
<ImageListItemBar
subtitle={<span>by: aaaaaaaaaaaa</span>}
position="below"
align="right"
/>
</ImageListItem>
</>
);
};
export default ProductListItem;
this is my HeroSection.js file
import React from 'react';
import '../App.css';
import { Button } from './Button';
import './HeroSection.css';
import video from './video-2.mp4';
function HeroSection() {
return (
<div className='hero-container'>
<video src={video} autoPlay loop muted />
<h1>SEE WHERE WILL YOU RESIDE NEXT</h1>
<p>What are you waiting for?</p>
<div className='hero-btns'>
<Button className='btns' buttonStyle='btn--outline'
buttonSize='btn--large'
>
GET STARTED
</Button>
<Button className='btns' buttonStyle='btn--primary'
buttonSize='btn--large'
>
WATCH TRAILER <i className='far fa-play-circle' />
</Button>
</div>
</div>
);
}
export default HeroSection;
and my code for Button.js is
import React from 'react'
import './Button.css'
import { Link } from 'react-router-dom';
const STYLES = ['btn--primary', 'btn--outline'];
const SIZES = ['btn--medium', 'btn--large'];
export const Button = ({children, type, onClick, buttonStyle, buttonSize}) => {
const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle: STYLES[0];
const checkButtonSize = STYLES.includes(buttonSize) ? buttonSize : SIZES[0];
return (
<Link to='sign-up' className='btn-mobile'>
<button
className={`btn ${checkButtonStyle} ${checkButtonSize}`}
onClick={onClick}
type={type}
>
{children}
</button>
</Link>
)
};
I think there is something wrong with my Button.js which is why none of it appears in my localhost server but I can't figure out what. Maybe it has something to do with props but I am a beginner and don't exactly understand it all too well
I have a component called Component1 in which I have the following code:
import React, { useState } from "react";
import Popover from "material-ui-popup-state/HoverPopover";
import Fab from "#material-ui/core/Fab";
import {
usePopupState,
bindHover,
bindPopover
} from "material-ui-popup-state/hooks";
import PaletteIcon from "#material-ui/icons/Palette";
import Colors from "./Colors";
const DEFAULT_COLOR = "red";
const COLORS = [/*list of colors*/];
const Component1 = ({ classes }) => {
const popupState = usePopupState({
variant: "popover",
popupId: "demoPopover"
});
const [selectedColor, setSelectedColor] = useState(DEFAULT_COLOR);
return (
<div className="box" style={{ backgroundColor: selectedColor }}>
<Fab variant="extended" {...bindHover(popupState)}>
<PaletteIcon />
</Fab>
<Popover
>
<div className="color-palette">
{COLORS.map((color) => (
<Colors
key={color}
selected={selectedColor === color}
onClick={setSelectedColor}
color={color}
/>
))}
</div>
</Popover>
</div>
);
};
export default Component1;
This component is imported in Component2 where the code is:
import React from "react";
import Component1 from "./Component1";
import Fab from "#material-ui/core/Fab";
import DeleteIcon from "#material-ui/icons/Delete";
function Component2(props) {
function handleClick() {
props.onDelete(props.id);
}
return (
<div className="note" style={{ backgroundColor: "selectedColor" }}>
<h1>{props.title}</h1>
<p>{props.content}</p>
<Fab onClick={handleClick}>
<DeleteIcon fontSize="small" />
</Fab>
<HoverPopover />
</div>
);
}
export default Component2;
In component2 I need to use the const selectedColor for styling purpose for div with class="note". However the issue is when I select colors from COLORS list the background-color of div with class="note" is not changing. I tried many options but I don't understand how to do it correctly. Please tell me how to do it right.
To share the "selectedColor" variable, which is actually a state, you would have to pass it through the props to the child component
Your "Component2" should declare the state "selectedColor", and this state and its function must be passed by the props to your "Component1".
https://reactjs.org/tutorial/tutorial.html#lifting-state-up
I have a <Button /> component and an <Icon/> component.
I try to implement a button with an icon.
The Button.jsx story:
import React from "react";
import { storiesOf } from "#storybook/react";
import Button from "../components/Button";
import Icon from "../components/Icon/Index";
import { iconTypes } from "../components/Icon/Index";
storiesOf("Button/Primary", module)
.add("With icon", () => (
<Button><Icon type={iconTypes.arrowRight}/></Button>
))
That works fine but I would like the api for a Button with an icon to be-
<Button icon={icons.arrow}>Click Me</Button>
How can I achieve that?
The Icon.jsx story:
import React from "react";
import { storiesOf } from "#storybook/react";
import Icon from "../components/Icon/Index";
import { iconTypes } from "../components/Icon/Index";
storiesOf("Icon", module)
.add("Arrow Right", () => (
<Icon type={iconTypes.arrowRight}>
</Icon>
))
.add("Arrow Left", () => (
<Icon type={iconTypes.arrowLeft}>
</Icon>
));
The <Button /> component:
import React from 'react';
import { css, cx } from 'emotion';
import colors from '../styles/colors';
export default function Button({
children,
...props
}) {
const mergedStyles = cx(
// css
);
// other css stuff
return (
<button {...props} disabled={disabled} className={mergedStyles}>
{children}
</button>
);
And <Icon /> component:
import React from "react";
import { css } from 'emotion';
import ArrowRight from "./arrow-right2.svg";
import ArrowLeft from "./arrow-left2.svg";
export const iconTypes = {
arrowRight: 'ARROW_RIGHT',
arrowLeft: 'ARROW_LEFT',
}
const iconSrc = {
ARROW_RIGHT: ArrowRight,
ARROW_LEFT: ArrowLeft,
}
const circleStyles = css({
width: 24,
height: 24,
borderRadius: "50%",
backgroundColor: "#f7f7f9",
display: "flex",
justifyContent: "center"
});
export default function Icon({ type }) {
return (
<div className={circleStyles}>
<img src={iconSrc[type]} />
</div>
)
};
Any help would be appreciated.
import React from 'react';
import {css, cx} from 'emotion';
import colors from '../styles/colors';
//import your ICON component & make sure your path is right
import Icon from "./../Icon";
export default function Button({
children,
disabled,
icon,
...props
}) {
const mergedStyles = cx(//your css);
return (
<button {...props} disabled={disabled} className={mergedStyles}>
// If icon prop is provided then render ICON component
{icon && <Icon type={icon}/>}
//Other children
{children}
</button>
);
}
in render of Button, you can do something like that :
Button.js:
render(){
const { icon } = this.props
return(
<Button>
{icon && <Icon type={icon}/>}
<Button>
)
}