We Keep Coding

How do I implement the ticker used in framer with framer motion?

<AnimatePresence>
<ul className='AnimationLine'>
{
data.map((item) => (
<motion.li
key={item.id}
initial={{
y: "100%",
opacity: 0
}}
animate={{
y: "-100%",
opacity: 1
}}
exit={{
y: "-100%",
opacity: 0
}}
transition={{
duration: 0.5,
loop: Infinity,
type: "ticker",
speed: 1,
// direction: "bottom",
align: "center",
gap: 10,
padding: 10
}}
whileHover={{
scale: isHovered
? 1.2
: 0.5
}}
onHoverStart={() => setIsHovered(true)}
onHoverEnd={() => setIsHovered(false)}>
{item.name}
</motion.li>
))
}
</ul>
</AnimatePresence>
I've implemented it this way, but it doesn't loop properly. I ask for help. Thank you.
enter image description here
For your information, the attributes in Framer are the same as the image.

onChange function is not enabling to enter more values in Material UI Text Field

I have a custom TextField component in my app but I am not able to increase the value of first TextField since it has onChange method whereas the second TextField doesn't have onChange method hence I am able to increase it's value.
import React, { useContext, useRef, useCallback, useState } from "react";
import {
Card,
CardContent,
CardActions,
TextField,
Button,
CardHeader,
Select,
MenuItem,
InputAdornment,
} from "#mui/material";
import CircularProgress from "#mui/material/CircularProgress";
import { alpha, styled } from "#mui/material/styles";
import UserContext from "../../context";
import polygonLogo from "../../assets/polygon-matic-token-icon.png";
import usdcTokenLogo from "../../assets/usdc-token-icon.png";
import "./index.css";
function UniSwapWidget() {
const [inputToken, setInputToken] = useState("Matic");
const [outputToken, setOutputToken] = useState("USDC");
const [inputTokenValue, setInputTokenValue] = useState("0.0");
const [outputTokenValue, setOutputTokenValue] = useState(0.0);
const [fetchPriceWaiter, setFetchPriceWaiter] = useState(false);
const { signerAddress, logIn, loginWaiter } = useContext(UserContext);
const UNI = "0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984";
const connectors = useRef(null);
const focusConnectors = useCallback(() => connectors.current?.focus(), []);
const CustomCard = styled(Card)(({ theme }) => ({
borderRadius: "24px",
padding: "8px",
boxShadow:
"rgb(0 0 0 / 1%) 0px 0px 1px, rgb(0 0 0 / 4%) 0px 4px 8px, rgb(0 0 0 / 4%) 0px 16px 24px, rgb(0 0 0 / 1%) 0px 24px 32px",
}));
const CustomCardContent = styled(CardContent)(({ theme }) => ({
display: "flex",
flexDirection: "column",
gap: "0.3rem",
}));
const CustomButton = styled(Button)(({ theme }) => ({
backgroundColor: "rgb(253, 234, 241)",
color: "rgb(213, 0, 102)",
width: "100%",
boxShadow: "none",
fontWeight: 500,
padding: "16px",
borderRadius: 20,
"&:hover": {
backgroundColor: "rgb(252, 220, 232)",
boxShadow: "none",
},
}));
const CustomSelect = styled(Select)(({ theme }) => ({
borderRadius: "16px",
height: "fit-content",
backgroundColor: "rgb(237, 238, 242)",
borderColor: "white",
"#demo-simple-select": {
display: "flex",
alignItems: "center",
gap: "0.3rem",
fontSize: "18px",
fontWeight: 500,
},
"&:hover": {
backgroundColor: "rgb(232, 0, 111)",
},
}));
const onHandleInputTokenValueChange = (e)=>{
e.preventDefault();
setInputTokenValue(e.target.value);
// setFetchPriceWaiter(true);
}
return (
<div className="uniswap">
<CustomCard sx={{ minWidth: 275 }}>
<CardHeader
title={
<span>
<b>Swap</b>
</span>
}
/>
<CustomCardContent>
<div className="input-token-div">
<TextField
id="outlined-basic"
placeholder="0.0"
// label={inputTokenValue === "" ? "0.0" : ""}
onChange={onHandleInputTokenValueChange}
// value={inputTokenValue}
fullWidth
required
variant="standard"
type="number"
InputLabelProps={{ shrink: false }}
InputProps={{
endAdornment: (
<InputAdornment position="end" sx={{ width: "10rem" }}>
<CustomSelect
labelId="demo-simple-select-label"
id="demo-simple-select"
value={inputToken}
InputLabelProps={{ shrink: false }}
sx={{
width: "100%",
}}
onChange={(e) => {
setInputToken(e.target.value);
setOutputToken(
e.target.value === "Matic" ? "USDC" : "Matic"
);
}}
>
<MenuItem
value={"Matic"}
sx={{
display: "flex",
alignItems: "center",
gap: "0.3rem",
}}
>
<img src={polygonLogo} className="token-logo"></img>
Matic
</MenuItem>
<MenuItem
value={"USDC"}
sx={{
display: "flex",
alignItems: "center",
gap: "0.3rem",
}}
>
<img src={usdcTokenLogo} className="token-logo"></img>
USDC
</MenuItem>
</CustomSelect>
</InputAdornment>
),
disableUnderline: true,
}}
/>
</div>
<div className="output-token-div">
<TextField
placeholder="0.0"
id="outlined-basic"
variant="standard"
type="number"
InputLabelProps={{ shrink: false }}
InputProps={{
endAdornment: (
<InputAdornment position="end" sx={{ width: "10rem" }}>
<CustomSelect
labelId="demo-simple-select-label"
id="demo-simple-select"
value={outputToken}
InputLabelProps={{ shrink: false }}
sx={{
width: "100%",
backgroundColor: "rgb(232, 0, 111)",
color: "white",
}}
onChange={() => console.log("chaning")}
>
<MenuItem
value={"Matic"}
disabled={inputToken === "Matic" ? true : false}
sx={{
display: "flex",
alignItems: "center",
gap: "0.3rem",
}}
>
<img src={polygonLogo} className="token-logo"></img>
Matic
</MenuItem>
<MenuItem
value={"USDC"}
disabled={inputToken === "USDC" ? true : false}
sx={{
display: "flex",
alignItems: "center",
gap: "0.3rem",
}}
>
<img src={usdcTokenLogo} className="token-logo"></img>
USDC
</MenuItem>
</CustomSelect>
</InputAdornment>
),
disableUnderline: true,
}}
/>
</div>
{fetchPriceWaiter ? (
<div className="price-div">
<CircularProgress sx={{ margin:0 }} size={25} />
Fetching Best Price...
</div>
) : null}
</CustomCardContent>
<CardActions>
{signerAddress !== "" ? (
<CustomButton variant="contained">
Swap
</CustomButton>
) : (
<CustomButton
variant="contained"
disabled={loginWaiter}
onClick={logIn}
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
{loginWaiter ? (
<CircularProgress sx={{ marginRight: 1 }} size={25} />
) : null}
Connect Wallet
</CustomButton>
)}
</CardActions>
</CustomCard>
</div>
);
}
export default UniSwapWidget;
I don't know why it's happening. I am using Material UI 5.10.3. May anyone knows what's wrong here?

Solution
Finally I have found the solution. Need to pass onChange function to InputProps. Reference: Mask Textfield component in Material-UI

How do I add React component on button click in Data Grid Material-UI?

I want to open a pop-up-like component 'ViewDownload.js' when I click on the Download Button that is present in a cell in the Data Grid of Material-UI.
Can someone please help me with how I can achieve this?
When I click on the Download button, it should open a new Component on top of the present screen(like a pop-up).
import React from 'react';
import { DataGrid } from '#mui/x-data-grid';
import Button from '#mui/material/Button';
import { Box, Typography } from '#mui/material';
import ViewDownload from './ViewDownload';
const columns = [
{ field: 'id', headerName: 'SL. No', width: 70, headerClassName: 'super-app-theme--header' },
{ field: 'status', headerName: 'PO Status', width: 80, headerClassName: 'super-app-theme--header' },
{
field: 'action',
headerName: 'Action',
type: 'file',
width: 120,
headerClassName: 'super-app-theme--header',
cellClassName: 'super-app-theme--cell',
renderCell: (params) => (
<strong>
<Button variant="contained" size="small" onClick={() => <ViewDownload />}>
Download
</Button>
{/* {isShown && <ViewDownload />} */}
</strong>
)
// renderCell: renderDetailsButton
}
];
const rows = [
{
id: 1,
poNo: 'PO_CCTN_0822_001',
poDate: '01/08/2022',
from: '08/2022',
to: '09/2022',
state: 'TN',
product: 'MLP',
certificate: 'Document',
quantity: '8000',
status: 'PENDING',
action: 'View/Download'
}
];
const Document = () => {
return (
<>
<Typography variant="h2" color="gray">
Documents
</Typography>
<Button variant="contained" sx={{ my: 3, background: 'gray', px: 3, py: 0 }}>
Filter
</Button>
<Box
display="flex"
justifyContent="center"
alignItems="center"
minHeight="100vh"
flexDirection="column"
sx={{
mt: -18,
mx: -14,
'& .super-app-theme--header': {
backgroundColor: 'gray',
color: 'white'
},
'& .super-app-theme--cell': {
color: '#86C029',
cursor: 'pointer'
}
}}
>
<Box sx={{ height: 300, width: { xs: '60%', sm: '65%', md: '80%' } }}>
<DataGrid rows={rows} columns={columns} pageSize={5} rowsPerPageOptions={[5]} />
</Box>
</Box>
</>
);
};
export default Document;

Seperate component (Eg: ViewButton.jsx)
function ViewButton(){
const [show, setShow] = useState(false);
return (
<>
// button component, onClick = setShow(true)
{ show && (<ViewDownload />) }
</>
)
}
Now you can call this component in renderCell method

You need create Modal component and ModalButton component.
function Modal({ children }) {
return ReactDOM.createPortal(children, document.body);
}
function ModalButton(props) {
const [visible, setVisible] = React.useState(false);
return (
<div>
<button variant="contained" size="small" onClick={() => setVisible(true)}>
View download
</button>
{visible && (
<Modal>
<div className="overlay" style={{position: "fixed", inset: "0 0 0 0"}}></div>
<div
style={{
top:"30%",
left: "30%",
position: "fixed",
width:"300px",
height: "300px",
backgroundColor: "rgba(0, 0, 0, 0.5)"
}}
>
<div style={{textAlign: "right"}}>
<button style={{width: "100px"}} onClick={() => setVisible(false)}>Close</button>
</div>
<h1>Modal content</h1>
</div>
</Modal>
)}
</div>
);
}
You change ModalButton to Button in renderCell
you can review here

Warning: React does not recognize the `PaperComponent` prop on a DOM element

I have simple modal using material ui 'Modal', i want to make it draggable, so user could move modal whereever they want simply by dragging, so i used 'Draggable' from react draggable, but i'm getting this error: Warning: React does not recognize the PaperComponent prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase papercomponent instead. If you accidentally passed it from a parent component, remove it from the DOM element.
what am i doing wrong ?
codesandbox:
https://codesandbox.io/s/draggabledialog-material-demo-forked-srw9yn?file=/demo.js
code:
import * as React from "react";
import Button from "#mui/material/Button";
import { Modal, Box } from "#material-ui/core";
import { Close } from "#material-ui/icons";
import Paper from "#mui/material/Paper";
import Draggable from "react-draggable";
export default function DraggableDialog() {
const [open, setOpen] = React.useState(false);
function PaperComponent(props) {
return (
<Draggable
handle="#draggable-dialog-title"
cancel={'[class*="MuiDialogContent-root"]'}
>
<Paper {...props} />
</Draggable>
);
}
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" onClick={handleClickOpen}>
Open draggable dialog
</Button>
<Modal
open={open}
onClose={handleClose}
PaperComponent={PaperComponent}
// aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
aria-labelledby="draggable-dialog-title"
>
<div>
<form
style={{
width: "360px",
color: "white",
display: "flex",
flexDirection: "column",
backgroundColor: "#1E2328"
}}
>
<div
style={{
backgroundColor: "black",
margin: "0",
display: "flex",
alignItems: "center",
height: "56px",
width: "360px",
color: "white",
justifyContent: "space-between"
}}
m={2}
>
<Box
style={{
color: "#E9ECEC",
fontSize: "21px"
}}
>
Countries{" "}
</Box>
<button
style={{ color: "white" }}
onClick={handleClose}
aria-label="close-settings-popup"
>
<Close />
</button>
</div>
<div style={{ height: "100%" }}>
<div>
Country Name
<p>Germany</p>
<p>France</p>
</div>
</div>
</form>
</div>
</Modal>
</div>
);
}

Modal component does not recognize PaperComponent that you passing to it as prop,
if you only want modal to be draggable modify your code like so:
import * as React from "react";
import Button from "#mui/material/Button";
import { Modal, Box } from "#material-ui/core";
import { Close } from "#material-ui/icons";
import Paper from "#mui/material/Paper";
import Draggable from "react-draggable";
export default function DraggableDialog() {
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" onClick={handleClickOpen}>
Open draggable dialog
</Button>
<Modal
open={open}
onClose={handleClose}
// aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
aria-labelledby="draggable-dialog-title"
>
<Draggable>
<div>
<form
style={{
width: "360px",
color: "white",
display: "flex",
flexDirection: "column",
backgroundColor: "#1E2328"
}}
>
<div
style={{
backgroundColor: "black",
margin: "0",
display: "flex",
alignItems: "center",
height: "56px",
width: "360px",
color: "white",
justifyContent: "space-between"
}}
m={2}
>
<Box
style={{
color: "#E9ECEC",
fontSize: "21px"
}}
>
Countries{" "}
</Box>
<button
style={{ color: "white" }}
onClick={handleClose}
aria-label="close-settings-popup"
>
<Close />
</button>
</div>
<div style={{ height: "100%" }}>
<div>
Country Name
<p>Germany</p>
<p>France</p>
</div>
</div>
</form>
</div>
</Draggable>
</Modal>
</div>
);
}
https://codesandbox.io/s/draggabledialog-material-demo-forked-sx2npc?file=/demo.js

Navigation inside TabBar React Native

I'm pretty new to React Native, I have the following tab bar navigation page:
const TabBar = () => {
return (
<BottomTab.Navigator
screenOptions={{
showIcon: true,
tabBarShowLabel: false,
tabBarStyle: {
position: "absolute",
bottom: 25,
left: 20,
right: 20,
elevation: 0,
backgroundColor: global.GUI.WHITE,
borderRadius: 15,
height: 90,
...styles.shadow,
},
header: ({ navigation, route, options }) => {
return (
<View
style={{
justifyContent: "space-between",
height: 110,
backgroundColor: global.GUI.WHITE,
alignItems: "center",
width: "100%",
flexDirection: "row",
...styles.shadow,
}}
>
<Image
source={ctsLogo}
style={{
resizeMode: "contain",
width: 100,
height: 70,
marginTop: 40,
marginLeft: 10,
}}
/>
<Button title="test" onPress={()=>{
}}>
<FontAwesomeIcon
icon={faCog}
style={{
color: global.GUI.ORANGE,
marginTop: 40,
marginRight: 20,
}}
size={30}
/>
</Button>
</View>
);
},
}}
>
<BottomTab.Screen
name="Home"
component={Main}
options={{
...
}}
/>
<BottomTab.Screen
name="Flyers"
component={Flyers}
options={{
...
}}
/>
<BottomTab.Screen
name="OnlineShop"
component={OnlineShop}
options={{
...
}}
/>
<BottomTab.Screen
name="Cards"
component={Cards}
options={{...}}
/>
<BottomTab.Screen
name="Shops"
component={Shops}
options={{
....
}}
/>
</BottomTab.Navigator>
);
};
I want to add navigate to another page while remaining in the context of the tab bar (let's says I want to go to another component called "Settings") programmatically by triggering the test button:
<Button title="test" onPress={()=>{...}}>
Inside the custom header, is it possible to do that? Thanks
EDIT:
I've changed my App.js code to this:
import { NavigationContainer } from "#react-navigation/native";
import { createNativeStackNavigator } from "#react-navigation/native-stack";
import TabBar from "./navigation/TabBar";
import Settings from "./page/Settings";
const Stack = createNativeStackNavigator();
export default function App() {
function Tabs() {
return <TabBar />;
}
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Tabs" component={Tabs}
options={{ headerShown: false }}/>
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
</NavigationContainer>
);
}
And now I'm able to navigate, thanks!

inside your SCREEN call navigation hook
const navigation = useNavigation();
then u can use NAVIGATION functions anywhere you want :) even inside Button
Button
<Button title="test" onPress={()=>{
navigation.navigate('Settings') // param here is "name" prop from your navigator
// navigation.goBack()
}}>

Try using this
props.navigation.navigate('Settings')