How to load a imported component dynamically based on its name inside a styled element?

Question

today i have a question concerning the REACT package styled-components. What I'm trying to accomplish is to create a styled div-component, which will be used as a parallax-container and has to load a certain image as its background. Now I could probably just import the image into the file and call it using ${imgComponentName} while being inside the styled.div. But I'm trying to be able to load the same Parallax-component with multiple images, whose names i want to pass as a prop on calling the Parallax-component like <Parallax bgi="mountain">.

My current code looks as follows:

import PropTypes from 'prop-types'
import styled from 'styled-components'
import hills from '../static/img/home/hills.jpeg'
import mountain from '../static/img/home/mountain.jpeg'

const bgi = props => props.bgi ? props => props.bgi : "mountain"

export const Parallax = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  background-image: url(${bgi});
  background-attachment: fixed;
  background-size: cover;
  flex-direction: column;
`

Parallax.propTypes = {
  bgi: PropTypes.oneOf(['mountain', 'hills'])
}

Is there a way of calling the imported image by its name with the string, that was passed as the prop bgi?

Best regards, Patrick

P.S. I'm aware of the extend-syntax, but i wanted to try to solve the problem trough one styled component.

Have you tried the answer from here: https://stackoverflow.com/questions/41346413/importing-images-in-react-js-with-styled-components?rq=1 ? — modmoto, Dec 28 '17 at 11:36

score 0 · Answer 1 · answered Dec 26 '17 at 14:57

0

You can use require like this

const bgi = props => props.bgi ? props => require(props.bgi) : "mountain"

or

background-image: url(${require(bgi))}

answered Dec 26 '17 at 14:57

blastz

525
5
14

Thanks for the answer, but when I try to implement it like this, I get the following error message: Error: Cannot find module "." Just for clarification: Aren't `import` and `require` two different implementations of requiring an module, a component or something like that? – Patrick S. Dec 26 '17 at 15:14
Might this issue be related to this bug? https://github.com/webpack/webpack/issues/4772 – Patrick S. Dec 26 '17 at 18:53
I don't think the error is `require`, maybe problem in `props.bgi`. Did you try the second one? – blastz Dec 27 '17 at 01:26
The issue is happening in either way. As soon as I'm trying to use `require` on the given string, the error is thrown. `props.bgi` shouldn't be the problem, the output seems to be correct. When passing it directly to the background-image it looks like this: `url(mountain)`. – Patrick S. Dec 27 '17 at 09:14

score 0 · Answer 2 · answered Dec 28 '17 at 11:32

I am not 100% sure, but I think you have to pass the props someway different. You have to remember, that you are actually only passing a string, that gets converted to a css class in the DOM and returns a React Component. For example this docu here: https://www.styled-components.com/docs/basics#attaching-additional-props

maybe something like this:

const Parallax = styled.div.attrs({
    url: props => props.bgi ? props => props.bgi : "mountain"
})`
  background-image: url(${props => props.url});
`;

Did you try to inline it? Like this:

const Parallax = styled.div`
    background-image: url(${props => props.bgi ? props => props.bgi : "mountain"});
`

How to load a imported component dynamically based on its name inside a styled element?

2 Answers2