We Keep Coding

Generic styled component Icon

I am styling my react component with styled-components. I want an icon component that can be used in different places just by changing size, colour props etc. I also want to pass icons names as props for different places. I am succeeded to change the size and colour but don't know how to pass the icon name as per requirement.
Here is my generic icon component:
import React from "react";
import { ReactSVG } from "react-svg";
import styled, { css } from "styled-components";
import { FaUserTie } from 'react-icons/fa';
const StyledSVGIcon = styled(FaUserTie)`
svg {
fill: black;
${({ size }) =>
size &&
css`
width: ${size};
height: ${size};
`}
${({ transform }) =>
transform &&
css`
transform: ${transform};
`}
path {
${({ color }) =>
color &&
css`
fill: ${color};
`}
}
}
`;
const GenIcon = props => {
return (
<StyledSVGIcon
src={`/icons/${props.name}.svg`}
color={props.color}
size={props.size}
transform={props.transform}
/>
);
};
export default GenIcon;
And I want to use it like this:
<GenIcon
name="FaUserNurse"
color="red"
size="16px"
/>
But the GenIcon component is not working. please help me where I am doing wrong. the icon could be any kind like svg or any other react icon library.

Try this out, you're close:
import React from "react";
import { ReactSVG } from "react-svg";
import styled, { css } from "styled-components";
import { FaUserTie, FaDocker } from "react-icons/fa";
const IconStyler = styled.span`
color: ${(props) => props.color};
& svg {
${(props) =>
props.small &&
css`
width: 14px !important;
height: 14px !important;
`}
${(props) =>
props.med &&
css`
width: 20px !important;
height: 20px !important;
`}
${(props) =>
props.large &&
css`
width: 28px !important;
height: 28px !important;
`}
}
`;
const Icon = ({ children, ...props }) => {
return <IconStyler {...props}>{children}</IconStyler>;
};
const GenIcon = () => {
return (
<div>
<h5>Any Icon</h5>
<div>
<Icon color="blue" small>
<FaUserTie />
</Icon>
</div>
<div>
<Icon color="orange" large>
<FaDocker />
</Icon>
</div>
</div>
);
};
export default GenIcon;
Here's a sandbox link: https://codesandbox.io/s/flamboyant-allen-60ho1?file=/src/GenIcon.js

Overflow is messing up with scrollY value

I have been trying to read the value of scrollY in my reactapp. But I found that it is being messed by overflow.
Here is the code that I used to read the scrollY:
import React from "react";
import{useEffect, useState} from "react"
export default function Test() {
const [offset, setOffset] = useState(0);
const setScroll = () => {
setOffset(window.scrollY);
};
useEffect(() => {
window.addEventListener("scroll", setScroll);
return () => {
window.removeEventListener("scroll", setScroll);
};
}, []);
return (
<div>
<div style={{color:"red"}}>{offset}</div>
</div>
);
}
Here is my app.jsx >>>
import React, { Component } from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { FetchData } from './components/FetchData';
import { Counter } from './components/Counter';
import abc2 from './img/abc2.jpg'
import './custom.css'
import Resume from './components/resumePage/Resume';
import Test from './components/Test.jsx';
var backGStyle={
backgroundImage:`url(${abc2})`,
minHeight: "100vh",
backgroundSize:'cover',
color:'red'
}
export default class App extends Component {
static displayName = App.name;
render () {
return (
<div className="app" style={backGStyle}>
<div className="mask">
<Layout>
<Route exact path='/' component={Home} />
<Route path='/counter' component={Counter} />
<Route path='/resume' component={Resume} />
<Route path='/test' component={Test} />
</Layout>
</div>
</div>
);
}
}
and my custom.css >>
a {
color: #0366d6;
}
code {
color: #E01A76;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.backgroundBody{
position: relative;
}
.app .mask{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color:#fff;
background-color:rgba(0, 0, 0, 0.6);
overflow:auto;
}
.abc{
color: aqua;
}
And if I remove the overflow: auto from custome.css .app .mask, I am being able to get the value of scrollY but my background image will be messed up, there will be white space in the background of half of the content like this >>>>

try element.scrollTop since your using divs as masks. ScrollY is only for the scroll position of the window (HTML element). Your question is a little vague, if your trying to align you background images use background-position and background-size. also set your overflow to clip.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

Styled Component Custom CSS in ReactJS

I'm actually having trouble doing CSS with the styled component in React. Given below is the code snippet
import React from 'react';
import { Navbar, Container, Row, Col } from 'reactstrap';
import styled from 'styled-components';
const Styles = styled.div`
.navbar {
background-color: black;
position: absolute;
bottom: 0;
width: 100%;
}
.h1 {
color: white;
}
`;
const Footer = () => {
return (
<Styles>
<Navbar>
<Container>
<Row>
<Col sm={{ size: 4 }}>
<h1>Hi</h1>
</Col>
</Row>
</Container>
</Navbar>
</Styles>
);
};
export default Footer;
What I want to do is to change the color of the h1 tag to white but the above custom CSS is not working. I've tried background-color too, but still the issue persists.

With styled-components, you shouldn't use classes for styling elements. You should use separated wrappers for components, it's the main point. I think you wanted to do something like this:
import React from 'react';
import { Navbar, Container, Row, Col } from 'reactstrap';
import styled from 'styled-components';
const StyledNavbar = styled(Navbar)`
background-color: black;
position: absolute;
bottom: 0;
width: 100%;
`;
const Header = styled.h1`
color: white;
`;
const Footer = () => {
return (
<StyledNavbar>
<Container>
<Row>
<Col sm={{ size: 4 }}>
<Header>Hi</Header>
</Col>
</Row>
</Container>
</StyledNavbar>
);
};
export default Footer;

you used .h1 the class, not h1 the tag, in your css.
https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

No animation when using CSSTransition and Group Transition in Reactjs

In REACTJS, I am working with creating a simple App that contains Transitions. I have imported CSSTransitions and Group Transition in my file but when I am trying to apply CSSTransition for some of my news item but I am not getting the animation. It is as if it doesn't even exist.
I can see that my items are wrapped inside the component, but I cannot get them to animate.
Could someone please help me figure out what I'm doing wrong?
import React, { Component } from 'react';
import {CSSTransition, TransitionGroup} from 'react-transition-group';
import {Link} from 'react-router-dom';
import Axios from 'axios';
import {URL} from '../../../Config';
import styles from './NewsList.module.css';
export default class NewsList extends Component {
state={
items:[],
start: this.props.start,
end: this.props.start+this.props.amount,
amount: this.props.amount
}
componentWillMount(){
this.request(this.state.start,this.state.end)
}
request=(start,end)=>{
Axios.get(`${URL}/articles?_start=${start}&_end=${end}`)
.then(response=>{
this.setState({
items:[...this.state.items,...response.data]
})
})
}
loadMore=()=>{
let end = this.state.end + this.state.amount
this.request(this.state.end, end)
}
renderNews=(type)=>{
let template= null;
switch(type){
case('Card'):
template= this.state.items.map((item, i)=>(
<CSSTransition
classNames={{
enter: styles.newList_wrapper,
enterActive: styles.newList_wrapper_enter
}}
timeout= {500}
key={i}
>
<div>
<div className={styles.newslist_item}>
<Link to={`/articles/${item.id}`}>
<h2>{item.title}</h2>
</Link>
</div>
</div>
</CSSTransition>
)
);
break;
default:
template = null;
}
return template;
}
render() {
return (
<div>
<TransitionGroup
component="div"
className="list"
>
{this.renderNews(this.props.type)}
</TransitionGroup>
<div onClick={this.loadMore}>
Load More
</div>
</div>
);
}
}
.newslist_item{
border: 1px solid #f2f2f2;
background: #ffffff;
margin-top: 0px;
padding: 8px 5px 0 5px;
}
.newslist_item h2{
font-size: 13px;
line-height: 21px;
margin: 5px 0;
color: #525252
}
.newslist_item a {
text-decoration:none;
}
.newsList_wrapper{
box-sizing: border-box;
opacity: 0;
transform: translateX(-100%);
transition: all .5s ease-in;
}
.newsList_wrapper_enter{
opacity: 1;
transform: translateX(0%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

classNames={{
enter: **styles.newsList_wrapper**,
enterActive: **styles.newsList_wrapper_enter**
There was a typo with the classnames. An S was missing.

React Context - "this" is undefined

I am using React Context in order to manage a global state.
So I have defined my Context with its Provider and its Consumer.
I have my videoplaying-context.js
import React from "react";
import { createContext } from 'react';
// set the defaults
const VideoContext = React.createContext({
videoPlaying: false,
setPlayingVideo: () => {}
});
export default VideoContext;
In my _app.js I have:
import App from 'next/app'
import { PageTransition } from 'next-page-transitions'
import VideoContext from '../components/videoplaying-context'
class MyApp extends App {
setPlayingVideo = videoPlaying => {
this.setState({ videoPlaying });
};
state = {
videoPlaying: false,
setPlayingVideo: this.setPlayingVideo
}
render() {
console.log('new _app.js defalt page');
const { Component, pageProps, router, state } = this.props
return (
<React.Fragment>
<VideoContext.Provider value={this.state}>
<PageTransition timeout={300} classNames="page-transition">
<Component {...pageProps} key={router.route} />
</PageTransition>
</VideoContext.Provider>
</React.Fragment>
)
}
}
export default MyApp
and then in one of my file I have put the Consumer:
import Layout from "../components/Layout";
import ReactPlayer from 'react-player
import VideoContext from '../components/videoplaying-context'
class Video extends React.Component {
constructor(props) {
super(props);
this.triggerVideo = this.triggerVideo.bind(this);
}
triggerVideo(event) {
console.log("click");
/* doing other stuff here... */
}
render() {
return (
<VideoContext.Consumer>
{context => (
<Layout>
<h1>Videos</h1>
<div>
<div className="group" id="process-video">
<div
className="poster-image"
onClick={() => {
this.triggerVideo.bind(this);
context.setPlayingVideo(true);
}}
/>
<ReactPlayer
url="https://vimeo.com/169599296"
width="640px"
height="640px"
config={{
vimeo: {
playerOptions: {
thumbnail_url: "http://placehold.it/640x640.jpg",
thumbnail_width: 640,
thumbnail_height: 640
}
}
}}
/>
</div>
</div>
<style jsx global>{`
.group {
position: relative;
height: 0;
overflow: hidden;
height: 640px;
width: 640px;
}
.poster-image {
background: url("http://placehold.it/640x640.jpg") center center;
background-size: cover;
bottom: 0;
left: 0;
opacity: 1;
position: absolute;
right: 0;
top: 0;
z-index: 10;
height: 640px;
width: 640px;
transition: all 0.4s ease-in;
}
.poster-image + div {
position: absolute;
top: 0;
left: 0;
width: 640px;
height: 640px;
}
.poster-image.video--fadeout {
opacity: 0;
}
`}</style>
</Layout>
)}
</VideoContext.Consumer>
);
}
}
export default Video;
So, the function "context.setPlayingVideo(true)" is working fine and it's correctly setting the global state "videoPlaying" to true, but, after the introduction of the Context, "this.triggerVideo.bind(this);" is not working anymore because "this" is undefined.
I tried removing it and other stuff but I'm really stuck and I don't know hot to fix it.
Thanks everyone!

On this line you are not calling the method triggerVideo
onClick={() => { this.triggerVideo.bind(this); context.setPlayingVideo(true); }}
Change to:
onClick={() => { this.triggerVideo(); context.setPlayingVideo(true); }}
or to:
onClick={() => { this.triggerVideo.bind(this)(); context.setPlayingVideo(true); }}