I am working in react.js project using material-ui and sass.I need to create Component like ChatBit component then i wrote it as it published.
customComponent.js file.
// #flow
import * as React from 'react';
import { useState } from 'react';
import { Avatar} from "#material-ui/core";
import useStyle from './styles';
type Props = {
children: React.Node;
}
const AbsoluteBox = ({
children
}: Props) => {
const [toggled, setToggled] = useState(false);
const styles = useStyle();
const handleClick = () => {
setToggled(!toggled);
};
const contentStyle = `container__content_${toggled ? 'show': 'hide'}`;
return (
<div className={styles.container__bottomRight}>
<div className={styles.container__header} onClick={handleClick}>
<Avatar
variant="rounded"
src="/assets/images/rebots.svg"
className={styles.container__header__avatar}
/>
</div>
<div
className={styles[contentStyle]}
>
{children}
</div>
</div>
);
};
export default AbsoluteBox;
styles.js file.
import { makeStyles } from '#material-ui/core';
export default makeStyles({
container__bottomRight: {
position: 'fixed',
right: 0,
bottom: 0,
marginRight: 12,
width: 300,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
boxShadow: '0px 0px 13px 0px rgba(0,0,0,0.51)'
},
container__header: {
paddingLeft: 10,
paddingTop: 4,
paddingBottom: 6,
backgroundColor: '#D7E0FC',
height: 38,
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
cursor: 'pointer'
},
container__header__avatar: {
height: 40
},
container__content_hide: {
transition: 'height 400ms 400ms, opacity 400ms 0ms',
opacity: 0.0,
height: 0,
},
container__content_show: {
height: 400,
opacity: 1.0,
boxSizing: 'border-box',
transition: 'height 400ms 0ms, opacity 400ms 400ms',
},
});
then i call the Component like that:
<AbsoluteBox>
<h1>Hello World</h1>
</AbsoluteBox>
so the probleme which i found is when i open the box, everything is correct but when i need to close it, there white space which i don't where is it coming from.
The <h1> tag that you have inside the box has margin, which cause those issues (the margin is taking place even if the height of the contains is set to 0).
You can fix this by setting the margin-top of the h1 element to 0 (or using some other elements and style them accordingly).
Related
I'm trying to get an icon to change color from the bottom up.
I was able to accomplish the desired results with normal text but the icon just goes invisible (or whatever color you set with color) instead of having a gradient fill.
I've tried various solutions from other posts but for whatever reason they have not worked out for me.
In the example code below, this color change should happen when the button is clicked.
import "./styles.css";
import React from "react";
import { FaHourglass } from "react-icons/fa";
import { Button, styled } from "#mui/material";
import clsx from "clsx";
export default function App() {
const [fill, setFill] = React.useState(false);
const handleClick = () => {
setFill(!fill);
};
return (
<Root className="App">
<FaHourglass
id="fillThisIcon"
className={clsx({ icon: true, iconFill: fill })}
/>
<Button variant="contained" onClick={handleClick}>
Press to fill
</Button>
<b className={clsx({ icon: true, iconFill: fill })}>TESTING</b>
</Root>
);
}
const Root = styled("div")(({ theme }) => ({
width: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
gap: 10,
"& > .icon": {
fontSize: 100,
color: "LightGrey"
},
"& > .iconFill": {
fontSize: 100,
color: "transparent",
animation: "fillIcon infinite",
animationDuration: "5s",
animationTimingFunction: "ease-out",
backgroundImage: "linear-gradient(to top, SandyBrown 50%, LightGrey 50%)",
backgroundSize: "100% 200%",
backgroundPosition: "0% 0%",
backgroundClip: "text"
},
"#keyframes fillIcon": {
"0%": {
backgroundPosition: "0% 0%"
},
"100%": {
backgroundPosition: "0% 100%"
}
}
}));
I have the working example for rotating an image on hover here
It uses scale(), rotate() and transition properties when hovering over the parent element to animate the image.
And overflow: hidden on the parent element to hide the excess from the image transformation.
When I try to replicate the same effect on React I see the image but the image does not rotate when i hover. But its all the same? What am I missing here?
import React from 'react';
import { Box } from '#mui/material';
import Image from 'mui-image';
const styles = {
hoverRotate: {
overflow: 'hidden',
margin: '8px',
minWidth: '240px',
maxWidth: '320px',
width: '100%',
},
'hoverRotate img': {
transition: 'all 0.3s',
boxSizing: 'border-box',
maxWidth: '100%',
},
'hoverRotate:hover img': {
transform: 'scale(1.3) rotate(5deg)',
},
};
function Rotate() {
return (
<Box style={styles.hoverRotate}>
<Image src="https://picsum.photos/id/669/600/800.jpg" />
</Box>
);
}
export { Rotate };
This way of styling doesn't detect hovers, hence use useState to set the hover state of the image (import it using import { useState } from "react";)
const [isHover, setIsHover] = useState(false);
Now, check if the Box is hovered or not, if hovered, set isHover to true, if not hovered, set it to false.
<Box
style={styles.hoverRotate}
onMouseEnter={() => setIsHover(true)}
onMouseLeave={() => setIsHover(false)}
>
{/* code */}
</Box>
Move your styles into the Rotate function. You are not assigning the key "hoverRotate img" to any of the styles hence it doesn't get applied. So change its name to something like image and add the hover code conditionally to it as shown below. The reason for moving styles into the Rotate function so that isHover stays in scope to get it's value.
const styles = {
hoverRotate: {
overflow: "hidden",
margin: "8px",
minWidth: "240px",
maxWidth: "320px",
width: "100%"
},
image: {
transition: "all 0.3s",
boxSizing: "border-box",
maxWidth: "100%",
transform: isHover && "scale(1.3) rotate(5deg)"
}
};
Finally, set the image style to Image
<Image
src="https://picsum.photos/id/669/600/800.jpg"
style={styles.image}
/>
Checkout this sandbox: https://codesandbox.io/s/distracted-matan-c43ufb?file=/src/App.js:829-928
With the new #mui/system styling solution (sx prop), you just need to pass the styles object to the sx prop:
import React from "react";
import { Box } from "#mui/material";
const boxSx = {
overflow: "hidden",
margin: "8px",
minWidth: "240px",
maxWidth: "320px",
width: "100%",
"& > img": {
transition: "all 0.3s",
boxSizing: "border-box",
maxWidth: "100%"
},
"&:hover > img": {
transform: "scale(1.3) rotate(5deg)"
}
};
function Rotate() {
return (
<Box sx={ boxSx }>
<img src="https://picsum.photos/id/669/600/800.jpg" />
</Box>
);
}
export { Rotate };
If you are missing the old #mui/styles (now deprecated) styling solution, you are missing makeStlyes, and then passing the resulting styles to the className prop:
import React from "react";
import Box from "#material-ui/core/Box";
import makeStyles from "#material-ui/core/styles/makeStyles";
const useStyles = makeStyles({
hoverRotate: {
overflow: "hidden",
margin: "8px",
minWidth: "240px",
maxWidth: "320px",
width: "100%",
"& > img": {
transition: "all 0.3s",
boxSizing: "border-box",
maxWidth: "100%"
},
"&:hover > img": {
transform: "scale(1.3) rotate(5deg)"
}
}
});
function Rotate() {
const styles = useStyles();
return (
<Box className={ styles.hoverRotate }>
<img src="https://picsum.photos/id/669/600/800.jpg" />
</Box>
);
}
export { Rotate };
I want to change Material UI Slider component color
I have tried to change CSS style and it's not working, then I tried the solution given in this issue and applied this code but it's not working
getMuiTheme:
const muiTheme = getMuiTheme({
slider: {
trackColor: "yellow",
selectionColor: "green"
}
});
and in Component:
<MuiThemeProvider muiTheme={muiTheme}>
<Slider
min={18}
max={90}
ValueLabelComponent={ValueLabelComponent}
defaultValue={40}
/>
</MuiThemeProvider>
It depends what version of Material-UI you are using.
Your code matches Material-UI v0.x:
import React from 'react';
import Slider from 'material-ui/Slider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { MuiThemeProvider } from 'material-ui';
const muiTheme = getMuiTheme({
slider: {
trackColor: "yellow",
selectionColor: "red"
}
});
export default function V0Slider() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<Slider
min={18}
max={90}
ValueLabelComponent={0}
defaultValue={40}
/>
</MuiThemeProvider>
);
}
If you are using Material-UI v4, that would be the way to go:
import React from "react";
import Slider from '#material-ui/core/Slider';
import { createMuiTheme } from '#material-ui/core/styles';
import { ThemeProvider } from '#material-ui/styles';
const muiTheme = createMuiTheme({
overrides:{
MuiSlider: {
thumb:{
color: "yellow",
},
track: {
color: 'red'
},
rail: {
color: 'black'
}
}
}
});
export default function V4Slider() {
return (
<ThemeProvider theme={muiTheme}>
<Slider min={18} max={90} defaultValue={40} />
</ThemeProvider>
);
}
If you are using another version of material-ui, let me know which one and i'll try to help.
I did the override with the 'withStyles' of material-ui v4.
This is for the Slider styles :
const CustomSlider = withStyles({
root: {
color: "#6f8eff",
height: 3,
padding: "13px 0",
},
track: {
height: 4,
borderRadius: 2,
},
thumb: {
height: 20,
width: 20,
backgroundColor: "#fff",
border: "1px solid currentColor",
marginTop: -9,
marginLeft: -11,
boxShadow: "#ebebeb 0 2px 2px",
"&:focus, &:hover, &$active": {
boxShadow: "#ccc 0 2px 3px 1px",
},
color: "#fff",
},
})(Slider);
And just after that render your slider :
<CustomSlider
value={value}
onChange={handleChange}
step={20} />
And Color should update, i also update the thumbs here for custom thumbs.
Hope it's helps : )
I am trying to spin an Image it is basically to show that a coin is flipped ( coin Tossing animation ) I have applied this basic animation to the image but it is not getting animated,
The image is stationary while I tested it on emulator
this is my index.android.js file :
import React, { Component } from 'react';
import {
AppRegistry,
View,
Animated,
Easing
} from 'react-native';
export default class animateTest extends Component {
constructor(props) {
super(props);
this.spinValue = new Animated.Value(0);
}
spin() {
this.spinValue.setValue(0);
Animated.timing(
this.spinValue, {
toValue: 1,
duration: 1500,
useNativeDriver: true,
easing: Easing.linear
}
).start();
}
render() {
const spin = this.spinValue.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg']
});
return (
<View style={styles.ViewStyle}>
<Animated.Image
style={[
styles.coinStyle,
{
transform: [
{ rotate: spin }
]
}
]}
source={require('./Images/Coin_Tail.png')}
style={styles.coinStyle} />
</View>
);
}
}
const styles = {
coinStyle: {
width: 150,
height: 150,
},
ViewStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
}
};
AppRegistry.registerComponent('animateTest', () => animateTest);
You code have 2 issues:
1) In your render function, you have a duplicated style prop for your image that override the first style with transform styling. To fix it, remove the second style prop
2) Your code did not trigger the spin animation, you can add a touchable with on press event to call your spin method. For quick test, you can add
componentDidMount() {
this.spin();
}
I it possible to use ReactCSSTransitionGroup from react-addons-css-transition-group with React inline styles? If so, how?
The component I'm working on:
import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import { removeNotification } from '../actionCreators'
import Notification from './Notification'
const mapStateToProps = state => ({
notifications: state.notifications
})
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators({ removeNotification }, dispatch)
})
class Notifications extends Component {
render() {
var style = {
position: 'fixed',
top: 20,
right: 20,
width: 300,
zIndex: 99
}
var tstyle = {
'notification-enter': {
visibility: 'hidden',
transform: 'translate3d(100%,0,0)'
},
'notification-leave': {
visibility: 'visible',
transform: 'translate3d(0,0,0)'
},
'notification-enter-notification-enter-active': {
visibility: 'visible',
transform: 'translate3d(0,0,0)',
transition: 'all 0.4s'
},
'notification-leave-notification-leave-active': {
visibility: 'hidden',
transform: 'translate3d(100%,0,0)',
transition: 'all 0.4s'
}
}
return (
<ul style={style}>
<ReactCSSTransitionGroup
style={tstyle}
transitionName='notification'
transitionEnterTimeout={400}
transitionLeaveTimeout={400}>
{this.props.notifications.map((notification, index) => {
return <Notification
key={index}
type={notification.type}
message={notification.message}
timeout={10000}
remove={this.props.actions.removeNotification} />
})}
</ReactCSSTransitionGroup>
</ul>
)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Notifications)
ReactCSSTransitionGroup is not compatible with inline styles because it adds or removes class names to/from DOM nodes to trigger the transitions. But you can use ReactTransitionGroup to make your own component that does the same thing ReactCSSTransitionGroup does, but with inline styles.
If you don't want to develop your own, you can use one that I wrote some time ago installing it with npm: ReactInlineTransitionGroup.
It has some advantages over ReactCSSTransitionGroup, like the fact that you can write your CSS transitions and not worry about setting timeout properties in the component, and that you can pass callbacks to check when a child entered or left your group.
DO THIS
style={{
// flex: over ? 1 : null,
display: 'flex',
width: wide ? 400 : null,
paddingBottom: wide ? 500 : null,
border: over ? '4px solid greenyellow' : null,
borderRadius: wide ? 30 : null,
paddingVertical: over ? 500 : null,
background: over ? 'black' : 'white',
transition:
'background 500ms',
cursor: 'pointer',
}}
Or if you wanna get multiple properties
style={{
display: 'flex',
width: wide ? 400 : null,
paddingBottom: wide ? 500 : null,
border: over ? '4px solid greenyellow' : null,
borderRadius: wide ? 30 : null,
paddingVertical: over ? 500 : null,
background: over ? 'black' : 'white',
transition:
'background 500ms, padding 500ms, width 500ms, border 500ms',
cursor: 'pointer',
}}