I am a bit new to the world of ReactJS but I have been coding in Javascript for a while now. Loving what ReactJS is doing as I was coding in pure JS before using Design Patterns and OOP I consider this a HUGE upgrade for me.
A while ago I started using react-starter-kit from kriasoft.
Also I integrated react-bootstrap to this project to make my life a bit easier.
I followed the tutorial from react-bootstrap and I successfully added Bootstrap.
The problem is now I cannot use the build in <Link /> from react-starter-kit which I liked a lot because of its simplicity and "power".
The official approach from react-bootstrap is to install react-router-bootstrap and replace <Link to="/path"> with <LinkContainer to="/path"> but that means that I have to replace react-routing and universal-route with react-router, and this is something I would like to avoid.
What is the right way to integrate react-bootstrap with react-starter-kit and still be able to use universal-routing? What changes should I make in order to make LinkContainer behave as Link component does?
When using Link component from react-starter-kit a get this kind of error
Warning: validateDOMNesting(...): cannot appear as a descendant of . See Header > NavItem > SafeAnchor > a > ... > Link > a.
Related link for this issue .
(React-Bootstrap link item in a navitem)
The official recommendation from react-bootstrap, and react-router.
(https://github.com/ReactTraining/react-router/issues/83#issuecomment-214794477)
Also as I said I am a bit new to reactJS and there is the possibility I am missing something.
Would be nice if someone could clarify the difference between Link component from react-starter-kit
and Link from react-router.
Thanks in advance
I start using my own NavItem component instead of original:
import React, { PropTypes } from 'react';
import cx from 'classnames';
import Link from '../Link';
class NavItem extends React.Component {
static propTypes = {
className: PropTypes.string,
href: PropTypes.string.isRequired,
active: PropTypes.bool,
disabled: PropTypes.bool,
children: PropTypes.node.isRequired,
onClick: PropTypes.func,
};
static defaultProps = {
active: false,
disabled: false,
};
render() {
const { className, href, active, disabled, children, onClick } = this.props;
return (
<li role="presentation" className={cx(className, { active, disabled })}>
<Link to={href} onClick={onClick}>
{children}
</Link>
</li>
);
}
}
export default NavItem;
This is the approach I follow for now thanks to this post.
Related
I am using CK editor and passing the initial data to editor as shown below
import React from 'react';
import CKEditor from '#ckeditor/ckeditor5-react';
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
classEditor extends React.Component{
constructor(props){
super(props)
this.state={
editorState:'<div class="main"><div class="child-1"><div>Iam inside </div></div><div class="child-2">Child 2</div></div>'
}
}
render(){
return <CKEditor
editor={ClassicEditor}
data={this.state.editorState}
onInit={editor => {
// You can store the "editor" and use when it is needed.
console.log('Editor is ready to use!', editor);
}}
config={{
allowedContent:true,
extraAllowedContent:true
}}
onChange={(event, editor) => {
const data = editor.getData();
this.handleEditorChange(data);
console.log(data);
}}
/>
}
}
when the OnChange handler is called it is changing the initially passed html to something like this
<p>Iam inside</p><p>Child 2</p>
How Can I stop CK Editor replacing div tags with p tags and allow customStyles and classNames
Nikhil
Regarding your post, it seems like you are going to create a custom theme for your inline text in the editor.. I am not sure whether this is right.
However, if so, you can customize the editor theme and use it for your purpose.
CKEditor has powerful builtin function for it.
In addition, if you want to customize the editor, you can do.
Please have a look at the following links:
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/basic-api.html#creating-an-editor
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/theme-customization.html
Hope this helpful.
config.protectedSource.push(/<p[^>]*><\/p>/g);
Use This Code In editorConfig
CKEDITOR.editorConfig = function (config) {
config.protectedSource.push(/<i[^>]*><\/i>/g); };
Is it possible to add vuetify to default vuepress theme ?
I just need to add few components to default theme however it would be nice to use the vuetify for handling forms within my components.
I have found a custom vuepress theme which uses a vuetify, however I would prefer to use default vuepress theme.
Another option is to eject the default theme and add the vuetify to it. However I would prefer not to eject the default theme just add vuetify to it.
The previous answer from oscarteg got me most of the way there. Here's what I had to do for the .vuepress/enhanceApp.js file (and yes, if you do not have one go ahead and create it).
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
Vue.use(Vuetify);
options.vuetify = new Vuetify({})
};
Note that in the new Vuetify({}) passed to options.vuetify you can set your theming.
See https://github.com/vuejs/vuepress/issues/681#issuecomment-515704018
The easiest way would be to use the vuetify CDN. In your config.js add something like
module.exports = {
head: [
['link', { rel: 'stylesheet', href: `https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css` }],
['script', { src: `https://cdn.jsdelivr.net/npm/vue/dist/vue.js` }],
['script', { src: `https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js` }],
]
}
Something like that. See https://vuepress.vuejs.org/config/#head
Another way would be to install the vuetify package and add Vuetify to enhanceApp. It would look like this in your .vuepress/enhanceApp.js
import Vuetify from 'vuetify'
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
Vue.use(Vuetify)
}
See https://vuepress.vuejs.org/guide/basic-config.html#theme-configuration
I followed the Angular2 tutorial to setup a local development environment with the quick start seed [1], which worked well. Then I decided to test animations using a shortened version of the first example in [2]. The app.component.ts looks like this and it toggles the background color by clicking:
import {
Component, trigger, state, style, transition, animate
} from '#angular/core';
#Component({
selector: 'my-app',
template: `<div [#heroState]="state" (click)="toggleState()">
<h1>TourOfHeroes</h1>
</div>
`,
animations: [
trigger('heroState', [
state('inactive', style({
backgroundColor: '#eee'
})),
state('active', style({
backgroundColor: '#cfd8dc'
})),
transition('inactive => active', animate('1000ms ease-in')),
transition('active => inactive', animate('1000ms ease-out'))
])
]
})
export class AppComponent {
state = 'active';
toggleState(){
this.state = (this.state === 'active' ? 'inactive' : 'active');
}
}
This works well in Chrome and Firefox, but not in IE11. There is no transition is IE11, the background changes instantly (see [3])
I did no project setup of my own and pretty much no coding either except for the inserted animation code. Is there any way to say why this doesn't work?
Thank you!
[1]: github .com/angular/quickstart/archive/master.zip
[2]: angular .io/docs/ts/latest/guide/animations.html
[3]: i.imgur .com/WU3rvEW.gif
PS: Stackoverflow doesn't let me post more than two links, you have to copy them yourselves ...
Angular animations use web animations API and IE does not support it.
http://caniuse.com/#feat=web-animation
https://angular.io/docs/ts/latest/guide/animations.html
You can add polyfill to get it working
https://github.com/web-animations/web-animations-js
Try these steps to perform animation in IE11:
Run npm install --save web-animations-js.
Add import 'web-animations-js in polyfills.ts add it yourself;
Your animation will work in IE10+, IE11 etc, browsers.
for more details refer below link -->
https://angular.io/guide/browser-support
I'm using React and React Router, and on some pages, I have some big lists rendered (as sub components) of the pages. When clicking on a link to change the page, it waits for all the subcomponents to be rendered which implies a delay between the click and the visual feedback. Is there a simple way not to wait for some sub components to be rendered?
I'm looking for a best practice, but maybe using a boolean and a setTimeout() is the only way. Thx.
When you have big lists of components, you often don't see all of them at the same time. You can use React Virtualized to actually render only visible components.
Check the code below:
const LightComponent = () => <div>LightComponent</div>
const HeavyComponent = () => <div>HeavyComponent</div>
class App extends React.Component {
constructor(props) {
super();
this.state = { shouldRenderHeavyComponent: false };
}
componentDidMount() {
this.setState({ shouldRenderHeavyComponent: true });
}
render() {
console.log("Render", this.state.shouldRenderHeavyComponent);
return (
<div>
<LightComponent/>
{ this.state.shouldRenderHeavyComponent && <HeavyComponent/> }
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
I had the same challenges. Finally I discovered this wonderful library, doing the trick for me: https://github.com/seatgeek/react-infinite
How do you prevent the content from floating behind the Navbar when scrolling?
<Navbar className="navbar-form navbar-fixed-top" responsive collapseable brand='x' inverse toggleNavKey={1} onClick={this.handleMouseDown}>
Or is it in:
<Nav className="navigation"..
Thanks
Add a custom class to your navbar component, say, sticky-nav. Define the following CSS properties on it:
.sticky-nav {
position: sticky;
top: 0;
}
This will make your navbar stick to the top and will automatically adjust the height of its following DOM elements. You can read more about the sticky property on MDN.
As Scrotch said adding:
<Navbar style={{backgroundColor: "#071740", position: "sticky"}} variant="dark" fixed="top">
worked for me, I did it inline but putting in a separate CSS file should work as well. This is the only thing that's worked so far for me.
NB: I'm using "react-bootstrap": "^1.0.0-beta.16"
I was running into this too. I found the following (baseline bootstrap) page that shows a fixed navbar and has the main page showing up properly below it. It seems to be a function of the css that they are using. Specifically:
padding-top: 70px;
I added
body {
padding-top: 70px;
}
to my css file, and it seems to be working. Obviously mileage may vary, not applicable in all territories, etc. I am going to need to test it further for myself, but that might get you started.
In order to get responsive padding-top for body you may use sth. like this (ES6 example):
import ReactDOM from 'react-dom';
import React from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
export default class Template extends React.Component {
constructor(props) {
super(props);
this.state = { navHeight: 50 };
this.handleResize = this.handleResize.bind(this);
}
handleResize(e = null) {
this.setState({ navHeight: ReactDOM.findDOMNode(this._navbar).offsetHeight });
}
componentDidMount() {
window.addEventListener('resize', this.handleResize);
this.handleResize();
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
render() {
return (
<body style={{paddingTop: this.state.navHeight}}>
<Navbar ref={(e) => this._navbar = e} fixedTop>
<Navbar.Header>
<Navbar.Brand>
<Link to="/">Some title</Link>
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={1} href="/link1">Link1</NavItem>
<NavItem eventKey={2} href="/link2">Link2</NavItem>
</Nav>
</Navbar>
<main>
{this.props.children}
</main>
</body>
);
}
}
Template.propTypes = {
navHeight: React.PropTypes.number,
children: React.PropTypes.object,
};
This way your <body> padding-top will always fit your navbar height even after adding more links in mobile view.
I also assume that base height is 50px (see the constructor) but it shouldn't matter as long as you call this.handleResize() in componentDidMount().
There is also the option to specify sticky-top which basically implements the solution of using position:sticky that others have suggested (see documentation).
So in your example you could just specify sticky-top instead of fixed-top as a className, and it satisfies your requirements.
react-bootstrap provides position utilities.
<Navbar sticky="top">
react-bootstrap documentation
However in-page anchor does not work properly, and position can be under the navbar after jump from a link.
I also use this custom css to fix the issue.
*[id]:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}
Reference
I came across the same problem. Wanting to stay within bootstrap and avoid custom css I tried adding class 'position-sticky', which gave me a left-shifted navbar. Apparently, for whatever reason, the navbar has a negative padding, so adding 'ps-0' to the class list fixed it.
<Navbar
fixed={'top'}
className={'position-sticky ps-0'}
>
for anyone using tailwind use sticky as a property in the top div of your navbar
<div className="sticky"> navbar-content </div>