I created a Sprite component which takes in 'icon' as a prop and determines which svg to render but I'm experiencing some weird behaviour.
I've had to resort to this method because I haven't been able to find a way to work with svg's (how to change their fill color!)
const Sprite: React.SFC<ISpriteProps> = (props: ISpriteProps) => {
const color = props.color || '#ACACAC'
let icon
if (props.icon === 'pin') {
icon = <Pin color={color} />
} else if (
props.icon === 'profile'
) {
icon = <Profile color={color} />
}
return (
<React.Fragment>
{icon}
</React.Fragment>
)
}
export default Sprite
Using the <Sprite/> in my <Navigation/> component like so
<Nav styles={this.state.styles}>
<ProfileIcon onClick={this.onProfileSelected}>
<Sprite icon='profile'
color={this.state.viewing === 'profile' ? '#5A4DB2' : ''} />
</ProfileIcon>
<LogoIcon onClick={this.onLogoSelected}>
<h1>
<img src={logo} alt="zestly" />
</h1>
</LogoIcon>
<MessagesIcon>
<img src={chat} onClick={this.onMessageSelected}
alt="messages" />
</MessagesIcon>
</Nav>
and in my <CardBlock/> component like so
const Card: React.SFC<{}> = (place) => {
return (
<CardOuter>
<CardPhoto>
<span>
<Sprite icon='pin' color='#fff' />Fitzroy</span>
</CardPhoto>
<CardDetails>
<div>
<h3>Vegie bar</h3>
<h4>7:00pm</h4>
</div>
<ProfileIcons />
</CardDetails>
</CardOuter>
)
}
For some reason the icon prop I choose to pass in to the Navigation component Sprite is determining what is rendered for the Sprite's in CardBlock as well.
E.g if I make it 'profile' in Navigation it will make all sprites render the profile icon for Sprite as well even though I specifically pass in 'pin'. If I switch it to 'pin' in Navigation, all CardBlock sprites will render the pin icon.
I don't understand, is this some weird React render quirk?
EDIT: So I thought it was something to do with stateless functional component rendering so I changed Sprite to a Component
class Sprite extends React.Component<ISpriteProps, {}> {
public render() {
const color = this.props.color || '#ACACAC'
const icons = {
'profile': Profile,
'pin': Pin
}
const ActiveIcon = icons[this.props.icon]
return (
<ActiveIcon color={color} />
)
}
}
Still no love, it's rendering ALL of them as profile icons if I pass 'profile' as icon prop to Sprite in Navigation component.
EDIT: Solved. It was something wrong with the svg's
you could use classnames library to select what class should be added to React element, including svg. And in css you give fill rule that you want. https://github.com/JedWatson/classnames
Related
I've looked through some of the other, similar questions on here, but none of the solutions seem to work for me.
I have a class component that represents a cell on a grid, and for each cell, I want there to be a specific background image that is revealed with the cell is hovered. The default component looks like this:
const Home = () => {
return (
<div id="main">
<Box title='About' svg={ BG1 } />
<Box title='Work' svg={ BG2 } />
<Box title='Portfolio' svg={ BG3 } />
<Box title='Resume' svg={ BG4 } />
</div>
);
};
I want to pass SVG components as background images, but can't seem to figure it out. I've imported each background image like this:
import { ReactComponent as BG1 } from './bg1.svg';
In the Box component, I've added state to handle some of the child elements, and the title prop seems to work out well, but the svg prop doesn't seem to work for me:
class Box extends React.Component {
constructor(props) {
super(props);
this.state = {
hovered: false,
};
}
hoverOn = e => {
this.setState({ hovered: true });
};
hoverOff = e => {
this.setState({ hovered: false });
};
render() {
const { hovered } = this.state;
const style = hovered ? { transform: 'translateY(-20%)', opacity: '.05' } : {};
return(
<section onMouseEnter={this.hoverOn} onMouseLeave={this.hoverOff}>
<a>
<div className="overlay" style={ style }></div>
<div className="bg" style={{ backgroundImage: `url(${this.props.svg})` }} ></div>
<div className="innerContent">
<h2>
{this.props.title}
</h2>
</div>
</a>
</section>
);
};
};
Whenever I inspect my developmental site, I just see <div class='bg'></div>. Any suggestions?
It's not working because BG1 is being set to the SVG file contents; not a link to the SVG file. I think you can just reference the filename in url("./bg1.svg") and it will expand it at build time. However, that probably won't work when you just pass in the filename as a prop. So - you could put the SVGs into the public folder and do something like this: {process.env.PUBLIC_URL + '/img/logo.png'}. Escape hatch doc.
With Vite you can do this: import modelGLB from './static/model.glb?url' to get the URL, but I forget the create-react-app equivalent.
I'm trying to create an image gallery component which displays small thumbnail images and a larger image 'preview'. The preview is replaced with the currently selected thumbnail.
The component allows any number of thumbnails to be passed in as children, and then an onClick prop is added to each thumbnail using cloneElement. This is working fine and I can see the new prop in the console, but nothing happens once the image is clicked. Here's my code so far:
Parent
<Gallery>
{gallery.map((thumbnail) => {
return (
<Image fluid={thumbnail.asset.fluid} />
);
})}
</Gallery>
Child
const Gallery = (props) => {
const [thumb, setThumb] = useState({
preview: null,
});
const thumbnails = React.Children.map(props.children, (child) =>
React.cloneElement(child, {
onClick: () => {
console.log("Clicked!")
setThumb({
preview: child.asset.fluid,
});
},
})
);
return (
<section>
<div className={preview}>
<Image fluid={preview} />
</div>
<div className={thumbnails}>
{thumbnails}
</div>
</section>
);
};
export default Gallery;
I'm not sure why I'm not getting any response (even in the console) when the thumbnails are clicked.
This is my first time using React so apologies if this is a terrible method, please let me know if there's a simpler/better way.
I was able to solve this issue by wrapping the <Image> component in a <div> as recommended by Nadia Chibrikova:
Parent
<Gallery>
{gallery.map((thumbnail) => {
return (
<div>
<Image fluid={thumbnail.asset.fluid} />
</div>
);
})}
</Gallery>
I have a toggle button that show and hides text. When the button is clicked I want it to hide another component and if clicked again it shows it.
I have created a repl here:
https://repl.it/repls/DapperExtrasmallOpposites
I want to keep the original show / hide text but I also want to hide an additional component when the button is clicked.
How to I pass that state or how do I create an if statement / ternary operator to test if it is in show or hide state.
All makes sense in the repl above!
To accomplish this you should take the state a bit higher. It would be possible to propagate the state changes from the toggle component to the parent and then use it in any way, but this would not be the preferred way to go.
If you put the state in the parent component you can use pass it via props to the needed components.
import React from "react";
export default function App() {
// Keep the state at this level and pass it down as needed.
const [isVisible, setIsVisible] = React.useState(false);
const toggleVisibility = () => setIsVisible(!isVisible);
return (
<div className="App">
<Toggle isVisible={isVisible} toggleVisibility={toggleVisibility} />
{isVisible && <NewComponent />}
</div>
);
}
class Toggle extends React.Component {
render() {
return (
<div>
<button onClick={this.props.toggleVisibility}>
{this.props.isVisible ? "Hide details" : "Show details"}
</button>
{this.props.isVisible && (
<div>
<p>
When the button is click I do want this component or text to be
shown - so my question is how do I hide the component
</p>
</div>
)}
</div>
);
}
}
class NewComponent extends React.Component {
render() {
return (
<div>
<p>When the button below (which is in another component) is clicked, I want this component to be hidden - but how do I pass the state to say - this is clicked so hide</p>
</div>
)
}
}
I just looked at your REPL.
You need to have the visibility state in your App component, and then pass down a function to update it to the Toggle component.
Then it would be easy to conditionally render the NewComponent component, like this:
render() {
return (
<div className="App">
{this.state.visibility && <NewComponent />}
<Toggle setVisibility={this.setVisibility.bind(this)} />
</div>
);
}
where the setVisibility function is a function that updates the visibility state.
I have a react-virtualized masonry grid implemented in a component as follows:
const MasonrySubmissionRender = (media: InputProps) => {
function cellRenderer({ index, key, parent, style }: MasonryCellProps) {
//const size = (media.submissionsWithSizes && media.submissionsWithSizes.length > index) ? media.submissionsWithSizes[index].size : undefined
//const height = size ? (columnWidth * (size.height / size.width)) : defaultHeight;
function getCard(index: number, extraProps: any) {
var Comp = media.cardElement ? media.cardElement : SubmissionCard
return <Comp submission={media.media[index]} {...media.customCardProps} />
}
return (
<div>
<CellMeasurer
cache={cache}
index={index}
key={key}
parent={parent}>
<div style={style}>
{getCard(index, media.customCardProps)}
</div>
</CellMeasurer>
</div>
);
}
return (
<Masonry
overscanByPixels={1000}
autoHeight={false}
cellCount={media.media.length}
cellMeasurerCache={cache}
cellPositioner={cellPositioner}
cellRenderer={cellRenderer}
style={{ backgroundColor: 'red' }}
height={900}
width={900}
/>
);
};
It renders a list of fairly complicated components which contain an array of chips, css animations, etc.
Due to this rendering is very slow even with react-virtualized.
I'd like to implement a system like in imgur.com where the component itself won't necessary load immediately displaying only a silhouette while I can have the component preparing to render in the background.
I know there's a way to swap out the component during scrolling butt his hides all components including ones which have already rendered.
Like all react-virtualized cell/row renderers, masonry's cell render is passed an isScrolling property. When the masonry is scrolling you can render a place holder instead of the cell content:
if (isScrolling) return (
<div>placeholder</div>
);
In addition, you are recreating all functions whenever the stateless component is rerendred. This causes an extra overhead for the garbage collector, and might also cause components to rerender unnecessarily.
Convert the component to a class component. The cellRenderer should be an instance method (use class properties or bind in constructor). The getCard can be a class method, or you can extract it from the component, and pass the media when you call the function.
Your code should be something like this (not tested):
function getCard(media: InputProps, index: number) {
var Comp = media.cardElement ? media.cardElement : SubmissionCard
return <Comp submission = {
media.media[index]
} { ...media.customCardProps }
/>
}
class MasonrySubmissionRender extends React.Component {
cellRenderer = ({
index,
key,
parent,
style,
isScrolling
}: MasonryCellProps) => {
if (isScrolling) return (
<div>placeholder</div>
);
return (
<div>
<CellMeasurer
cache={cache}
index={index}
key={key}
parent={parent}>
<div style={style}>
{getCard(media, index)}
</div>
</CellMeasurer>
</div>
);
}
render() {
return (
<Masonry
overscanByPixels={1000}
autoHeight={false}
cellCount={media.media.length}
cellMeasurerCache={cache}
cellPositioner={cellPositioner}
cellRenderer={this.cellRenderer}
style={{ backgroundColor: 'red' }}
height={900}
width={900}
/>
);
}
}
Is there a non hacky way to keep Material UI tabs and React router in sync?
Basically, I want to change the URL when the user clicks on a tab [1] and the tabs should change automatically when the user navigates to a different page with a non-tab link or button, and of course on direct access [2] and page refresh too.
Also, it would be nice to have the react router's non exact feature too, so the /foo tab should be active both for /foo and /foo/bar/1.
[1] Other SO answers recommend using the history api directly, is that a good practice with react-router?
[2] I'm not sure what it's called, I meant when the user loads for example /foo directly instead of loading / and then navigating to /foo by a tab or link
Edit:
I created a wrapper component which does the job, but with a few problems:
class CustomTabs extends React.PureComponent {
constructor() {
super();
this.state = {
activeTab: 0
}
}
setActiveTab(id) {
this.setState({
activeTab: id
});
return null;
}
render() {
return (
<div>
{this.props.children.map((tab,index) => {
return (
<Route
key={index}
path={tab.props.path||"/"}
exact={tab.props.exact||false}
render={() => this.setActiveTab(index)}
/>
);
})}
<Tabs
style={{height: '64px'}}
contentContainerStyle={{height: '100%'}}
tabItemContainerStyle={{height: '100%'}}
value={this.state.activeTab}
>
{this.props.children.map((tab,index) => {
return (
<Tab
key={index}
value={index}
label={tab.props.label||""}
style={{paddingLeft: '10px', paddingRight: '10px', height: '64px'}}
onActive={() => {
this.props.history.push(tab.props.path||"/")
}}
/>
);
})}
</Tabs>
</div>
);
}
}
And I'm using it like this:
<AppBar title="Title" showMenuIconButton={false}>
<CustomTabs history={this.props.history}>
<Tab label="Home" path="/" exact/>
<Tab label="Foo" path="/foo"/>
<Tab label="Bar" path="/bar"/>
</CustomTabs>
</AppBar>
But:
I get this warning in my console:
Warning: setState(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.
I think it's because I set the state immediately after render() is called - because of Route.render, but I have no idea how to solve this.
The tab changing animations are lost: http://www.material-ui.com/#/components/tabs
Edit #2
I finally solved everything, but in a bit hacky way.
class CustomTabsImpl extends PureComponent {
constructor() {
super();
this.state = {
activeTab: 0
}
}
componentWillMount() {
this.state.activeTab = this.pathToTab(); // eslint-disable-line react/no-direct-mutation-state
}
componentWillUpdate() {
setTimeout(() => {
let newTab = this.pathToTab();
this.setState({
activeTab: newTab
});
}, 1);
}
pathToTab() {
let newTab = 0;
this.props.children.forEach((tab,index) => {
let match = matchPath(this.props.location.pathname, {
path: tab.props.path || "/",
exact: tab.props.exact || false
});
if(match) {
newTab = index;
}
});
return newTab;
}
changeHandler(id, event, tab) {
this.props.history.push(tab.props['data-path'] || "/");
this.setState({
activeTab: id
});
}
render() {
return (
<div>
<Tabs
style={{height: '64px'}}
contentContainerStyle={{height: '100%'}}
tabItemContainerStyle={{height: '100%'}}
onChange={(id,event,tab) => this.changeHandler(id,event,tab)}
value={this.state.activeTab}
>
{this.props.children.map((tab,index) => {
return (
<Tab
key={index}
value={index}
label={tab.props.label||""}
data-path={tab.props.path||"/"}
style={{height: '64px', width: '100px'}}
/>
);
})}
</Tabs>
</div>
);
}
}
const CustomTabs = withRouter(CustomTabsImpl);
Firstly, thanks for replying to your very question.
I have approached this question differently, I decided to post here for the community appreciation.
My reasoning here was: "It would be simpler if I could tell the Tab instead the Tabs component about which one is active."
Accomplishing that is quite trivial, one can do that by setting a known fixed value to the Tabs component and assign that very value to whatever tab is supposed to be active.
This solution requires that the component hosting the tabs has access to the props such as location and match from react-router as follows
Firstly, we create a function that factory that removes bloated code from the render method. Here were are setting the fixed Tabs value to the Tab if the desired route matches, other wise I'm just throwing an arbitrary constant such as Infinity.
const mountTabValueFactory = (location, tabId) => (route) => !!matchPath(location.pathname, { path: route, exact: true }) ? tabId : Infinity;
After that, all you need is to plug the info to your render function.
render() {
const {location, match} = this.props;
const tabId = 'myTabId';
const getTabValue = mountTabValueFactory(location, tabId);
return (
<Tabs value={tabId}>
<Tab
value={getTabValue('/route/:id')}
label="tab1"
onClick={() => history.push(`${match.url}`)}/>
<Tab
value={getTabValue('/route/:id/sub-route')}
label="tab2"
onClick={() => history.push(`${match.url}/sub-route`)}
/>
</Tabs>
)
}
You can use react routers NavLink component
import { NavLink } from 'react-router-dom';
<NavLink
activeClassName="active"
to="/foo"
>Tab 1</NavLink>
When /foo is the route then the active class will be added to this link. NavLink also has an isActive prop that can be passed a function to further customize the functionality which determines whether or not the link is active.
https://reacttraining.com/react-router/web/api/NavLink