I am using
import { Nav } from 'office-ui-fabric-react';
function CustomNav(props) {
return <Nav groups={groups} selectedKey={selectedKey} onLinkClick={handleLinkClick} data-myTag="hello" />;
}
For nav object, I want to add custom html attributes such as data-myTag. How do I add this attribute to the button that is added to the DOM by this Nav object.
Based on looking at the source where Nav is rendered, it unfortunately looks like it isn't possible to add data tags to the container.
Your best bet would likely be to either:
Put the data attributes on a div you return from your CustomNav component, or
Create a pull request with Fabric itself which renders those data attributes
Related
We use Reakit dialogs to prompt users to take an action in our React web app.
On some pages, we have specific text related to the action and would like to render this specific content in the dialog. On all other pages, we want to fall back to generic text.
Our simplified component hierarchy for generic pages looks like:
<BaseLayout>
...
</BaseLayout>
and for a page where we want to show specific text,
<BaseLayout>
...
<SpecificPage/>
...
</BaseLayout>
What we'd like to happen is:
On pages that render the SpecificPage component, the Dialog appears with the specific text
On pages that do not render the SpecificPage component, the Dialog appears with the fallback generic text
Our approach was to have the SpecificPage component render a Dialog with the page-specific text, and the BaseLayout component render a Dialog with the generic fallback text, but this approach isn't ideal -- users see a flash of the BaseLayout dialog before the SpecificPage dialog is rendered. Is there any way to define a single component that is "overridden" by descendants in the component hierarchy, or other way to achieve this conditional rendering?
You can simply check if you're rendering anything as children in the BaseLayout component or not, If not you can fallback to generic text.
Here's an example.
App Component
import React from 'react';
import { BaseLayout } from './BaseLayout';
export function App(props) {
return (
<div className='App'>
<BaseLayout>
<h1>Hello World.</h1>
</BaseLayout>. // Renders hello world
<BaseLayout /> // Render generic text
</div>
);
}
Base Layout Component
import React from 'react';
export function BaseLayout({children}) {
return (
<div>
{children ? children : "Some Generic Text"}
</div>
);
}
See https://github.com/ariakit/ariakit/discussions/1266#discussioncomment-2617748 for a solution and CodeSandbox that solves this problem well using the Constate library.
I'm trying to add a CSS file for a specific component in react, but the CSS file apply in all component
How can I add style.css for a specific component?
import React, { Component } from "react";
import { Link } from "gatsby";
import Layout from "../components/layout"
import Footer from "../components/Globals/Footer"
import "./crm2.css"
class Crm extends Component {
render() {
...
}
}
You can refer to this link on which the narrator is explaining the options you have for styling the React Components. Styling in React
Your options are
In-Line styling
Using variables
styling by means of a function or method inside the component
Once you take a look at the video link, you will know what approach suits you the best.
Your CSS className must be unique. If you write CSS for this class then it will be applied to the specified component.
There are two components in React
Built-in component (like <p>, <div>, <span>, etc)
React component (like <App/>,<Product>, etc)
React components allows you to break up the UI into different pieces so that it can then be reused and handled individually. It is the Dot-notation component like <UserContext.Provider> and any component which starts with a capital letter.
These components can be styled if you provide a unique className to those components and you write a CSS style for that.
You might have styled the built-in component as shown below
style.css file:
p {
font-size:14px;
color: red;
}
Using the above approach, the CSS would be applied to all the <p> component in all the JSX file.
If you have wanted to style the React component then you need to select those components and styled it as shown below.
<Product className = "items" />
CSS would be
.items {
color: red;
...
}
I have a site that is not a spa. At one point when a button is click a div is created in the dom. After the div is created I want to render a React component into this div. My component looks like this
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
date: null
};
}
render() {
return (
<div>
//Here will be more controls
</div>
);
}
}
I'm running webpack on this file and in my original page I'm referencing the generated js file.
What code should I add to my button click code that is adding the div so I can render the component?
ps. Actually the functionality is a bit more complex, because we are scraping a page the user specifies and showing the html in an iframe through the srcdoc attribute. The scraped html has the div added and then we render a widget in the div so the user can preview what our widget would look like on their page.
You have to use ReactDOM to render the component. Install and import react-dom in your project so that webpack bundles it for you. You might need to expose ReactDOM as global in your web pack configuration.
Below is a simple code snippet:
ReactDOM.render(
<MyComponent/> ,
document.getElementById(id) // id of element in your case div created
);
Reference
https://reactjs.org/docs/react-dom.html
I have a navigation component with custom routes. Now i want to make the
link active when visiting a page. But i cant find the right solution
because i am also using laravel. So what i need is to use react-router-dom with the react dom render method or something like that.
I am using the navigation in the header component and importing the header component in my pages.
Does someone have an idea how to fix this. Or what what direction i
should look.
index.js
if(document.getElementById('home__page')) {
ReactDOM.render(
<Home />,
document.getElementById('home__page')
);
nav.js
<nav>
<ul><li>home</li></ul>
</nav>
I could make 10 different pages and add routing to each of them and then render them in my index file. But that doesn't sound great.
react-router-dom includes a NavLink module which will render a <a/> element for you and has some built-in props you can use. For instance the activeClassName prop. This className will be applied to the element when the appropriate Route is active.
<NavLink to="/some-path" activeClassName="active">Link</NavLink>
When you define a react-router-dom Route to "/some-path" and this is the currently active path, the "active" className will be applied to the link element. You can use this className to change the styling for currently active links.
See the example here in the docs: https://reacttraining.com/react-router/web/guides/basic-components/navigation
my solution is using jquery to manipulate dom elements after loading
$(function () {
const menuLink = location.pathname;
if (menuLink === '/') {
$('.menu a[href^="/"]').first().addClass('active');
} else {
$('.menu a[href^="/' + menuLink.split("/")[1] + '"]').addClass('active');
}
});
I have just started learning react and Meteor. I am using the okgrow:accounts-ui-react to show a login and signup form on my site. You only have to add the component to show the signup/login form on your page. However, the dropdown form is ugly and does not go well with my site's design. Therefore, I want to learn how can you modify the styles of such meteor components. In this case, how can you change the style of this component to appear as a materially design form. I am using materialize.css and I want to know how can I give this login component a materialize design inspired look? I want to make the dropdown inspired by material design and also change the contents of the form. The following is my component that I created by following a video on leveluptuts.
import React, {Component} from 'react';
import { LoginButtons } from 'meteor/okgrow:accounts-ui-react';
class App extends Component{
render(){
return (
<div>
<header>
<h1>Level Up Voting </h1>
<LoginButtons/>
</header>
</div>
);
}
}
The following image shows how my login button appears on screen: