Skip to main content

drag and drop uploader

0 likes • Nov 18, 2022
JavaScript
Loading...
Download

More JavaScript Posts

Responsive Bootstrap Card.Img

JoeCamRoberon
0 likes • Jan 25, 2023
JavaScript
const ResponsiveCardImg = styled(Card.Img)`
// For screens wider than 768px
@media(min-width: 768px) {
// Your responsive styles here.
}
// For screens smaller than 768px
@media(max-width: 768px) {
// Your responsive styles here.
}
`
export default function App() {
return (
<MainContainer>
<Container>
<Card text='white' bg='dark' style={styles.mainCard}>
<ResponsiveCardImg
style={styles.cardImage}
onClick={handleClick}
src={apeImage}
alt='Degenerate Ape Academy'
/>
<Card.Body>
<Card.Title className='text-center' as='h2'>
{apeId}
</Card.Title>
</Card.Body>
</Card>
</Container>
</MainContainer>
);
}

Generate a random HEX color

AustinLeath
0 likes • Nov 18, 2022
JavaScript
// Generate a random HEX color
randomColor = () => `#${Math.random().toString(16).slice(2, 8).padStart(6, '0')}`;
// Or
const randomColor = () => `#${(~~(Math.random()*(1<<24))).toString(16)}`;

compact object

CodeCatch
0 likes • Nov 19, 2022
JavaScript
const compactObject = val => {
const data = Array.isArray(val) ? val.filter(Boolean) : val;
return Object.keys(data).reduce(
(acc, key) => {
const value = data[key];
if (Boolean(value))
acc[key] = typeof value === 'object' ? compactObject(value) : value;
return acc;
},
Array.isArray(val) ? [] : {}
);
};
const obj = {
a: null,
b: false,
c: true,
d: 0,
e: 1,
f: '',
g: 'a',
h: [null, false, '', true, 1, 'a'],
i: { j: 0, k: false, l: 'a' }
};
compactObject(obj);
// { c: true, e: 1, g: 'a', h: [ true, 1, 'a' ], i: { l: 'a' } }

Redux Setup

JoeCamRoberon
0 likes • Mar 11, 2021
JavaScript
import { configureStore } from "@reduxjs/toolkit";
import { combineReducers } from "redux";
import profile from "./profile";
import auth from "./auth";
import alert from "./alert";
const reducer = combineReducers({
profile,
auth,
alert,
});
const store = configureStore({ reducer });
export default store;

React - Lifting State

JoeCamRoberon
0 likes • Jan 25, 2023
JavaScript
export const Main = () => {
const [title, setTitle] = useState('');
return (
<ChildComponent
title={title}
onChange={e => setTitle(e.target.value)}
/>
);
};
export const ChildComponent = ({ title, onChange }) => {
return (
<Box component="form" onSubmit={() => {}} noValidate mt={5}>
<TextField
fullWidth
id="title"
label="Title"
name="title"
autoComplete="title"
autoFocus
color="primary"
variant="filled"
InputLabelProps={{ shrink: true }}
value={title}
onChange={onChange}
/>
</Box>
);
};

Get timezone as a string

CodeCatch
0 likes • Nov 19, 2022
JavaScript
const getTimezone = () => Intl.DateTimeFormat().resolvedOptions().timeZone;
// Example
getTimezone();