691 comments found.
Can you check my site ı have a error https://restomenum.com
Hi,
I don’t think the link contains anything related to our template.
Hey i bought your react them but how i get wizard component like this https://gogo-react.coloredstrategies.com/app/ui/forms/wizard
Hi,
Preview of the template is build version of Gogo-React project and you may find wizard on “src\views\app\ui\forms\wizard.js” file.
Found thanx
I can’t express how terrible the documentation is for this. If you have a blank starter project there needs to be documentation on components and how to use them. Period.
Hi,
You are right about the starter projects. We have included them due to the user comments. We are looking for ways to improve our documentation but since there are lots of different plugins&libraries involved we don’t know which would be the best approach for it. We have included guides to provide some answers but it is mostly useful for Gogo-React project and not for the starters.
If you have any recommendation as an “outsider” we would be more than happy to hear them.
All the best.
There is a ContextMenuContainer on the data-list.js component. However, I couldn’t find a way to access it. How can I do it?
To show the context menu for each selected item
Hi,
I’m not entirely sure whay you meant but you may reach our example context menu here: src/containers/pages/ContextMenuContainer.js
onContextMenu,onContextMenuClick functions are called when menu shown and menu item clicked.
Hi, I succesfully adding loginWithEmailPassword and loginWithEmailPasswordAsync with mongodb both in auth/saga file. But when it push back to / I got blank page with some of the error in console like below:
Warning: Failed prop type: Invalid prop `message` supplied to `Notification`, expected a ReactNode. in Notification (at Notifications.js:45) in Notifications (at NotificationContainer.js:44) in NotificationContainer (at App.js:87) in IntlProvider (at App.js:82) in div (at App.js:81) in App (created by ConnectFunction) in ConnectFunction (at AppRenderer.js:12) in Suspense (at AppRenderer.js:11) in Provider (at AppRenderer.js:10)
and the other one
react-dom.development.js:14748 Uncaught Error: Objects are not valid as a React child (found: TypeError: Cannot read property ‘uid’ of undefined). If you meant to render a collection of children, use an array instead. in div (at Notification.js:65) in div (at Notification.js:63) in div (at Notification.js:62) in Notification (at Notifications.js:45) in Transition (created by CSSTransition) in CSSTransition (at Notifications.js:41) in div (created by TransitionGroup) in TransitionGroup (at Notifications.js:37) in div (at Notifications.js:36) in Notifications (at NotificationContainer.js:44) in NotificationContainer (at App.js:87) in IntlProvider (at App.js:82) in div (at App.js:81) in App (created by ConnectFunction) in ConnectFunction (at AppRenderer.js:12) in Suspense (at AppRenderer.js:11) in Provider (at AppRenderer.js:10)
This is my data from api
{data}
Hi,
You may find notification usage examples at “src/containers/ui/NotificationExamples.js”. I suggest you should check notification set within login success&error conditions.
Cheers.
Hi My web site interface has many lines, but the size of one line is too high, I want to reduce that size to my liking, where can I edit???
Hi,
If you are refering to parahraph elements, you may add below lines to _gogo.style.scss file to change line-height.
p {
line-height: 1rem;
}
hi, i have more than 10 images showing using the <GlideComponent>. For each image, i have a <Tooltip>. When i hover each image, the image should stop moving and show the Tooptip. But the Tooltip is not showing beside the image. May i know how to solve this problem? I have tried by changing the Tooltip’s placement (eg. auto-end, auto, auto-start) but still doesn’t work well. Please advise
Hi,
Tooltips are controlled elements and you need to create a component to contain the tooltip and the image. You may find modified version of “components/common/TooltipItem.js” and BasicCarouselItem from “views/app/ui/components/carousel.js” below.
import React, {Fragment} from "react";
import { Button, Tooltip } from "reactstrap";
class TooltipItem extends React.Component {
constructor(props) {
super(props);
this.state = {
tooltipOpen: false
};
}
toggle = () => {
this.setState(prevState => ({
tooltipOpen: !prevState.tooltipOpen
}));
};
render() {
return (
<Fragment>
<img classname="card-img w-100" src="{this.props.item.img}" id="{"Tooltip-"" this.props.item.id="" />
<Tooltip
placement={this.props.item.placement}
isOpen={this.state.tooltipOpen}
target={"Tooltip-" + this.props.item.id}
toggle={this.toggle}
>
{this.props.item.body}
</Tooltip>
</Fragment>
);
}
}
export default TooltipItem;
const BasicCarouselItem = ({ title, img, detail, badges, id }) => {
return (
<div classname="glide-item">
<Card>
<div classname="position-relative">
<TooltipItem item={{
placement: "right",
text: title,
body: title,
img: img,
id: id
}}></TooltipItem>
{badges &&
badges.map((b, index) => {
return (
<span key="{index}
" classname="{`badge" badge-pill="" badge-="" b.color="" position-absolute="" index="==" :="">
{b.title}
</span>
);
})}
</div>
</Card>
</div>
);
};
Hi,
do you have a plan react-table update to v7?
Hi,
We are currently working on updates for our projects. Our priority is Vue version and after that we will update Gogo so it may take some but it’s definitely on our to-do list.
Best.
Hi, I want to use your simple-line-icons and iconsminds for consistency but they are css files. Is there a way for me to get them as svg files?
Btw I did purchase your theme with another account. Do I have to use that account or are there any other way to let you know that I purchase you theme?
Hi,
I don’t think svg files for Simle Line Icons are available. You may check their Github repo to make sure. https://github.com/simplelineicons/simplelineicons.github.io
Please reach us via the contact form at our profile page by using purchased account so we can send you svg files for Iconsmind.
https://themeforest.net/user/coloredstrategiesCheers.
Can you give me a sample without redux store and routing.
Hi, The project is heavily dependant on redux(for menu, async events, resize and so on) and routing(for menu, router links and etc) so it would be quite a work to alter them.
Are you available as a freelancer
Hi, Unfortunately, we don’t accept freelance jobs.
Could you tell me how to create toggle top navbar or hidden top navbar
Hi,
Unfortunately, there is not a built-in mechanism to do it. It’s also not an easy task to do since lots of areas such as menu, main, application menu, footer and etc. are dependent to header for their position and size calculations.
hello I have any question can you give me an example “Datatables Rows Page” in react code
Thanks
Hi,
If you are refering to separated rows, unfortunately it is yet to be implemented.
You may find currently available implementations at the bottom of the tables page: https://gogo-react.coloredstrategies.com/app/ui/components/tables
Or you may use list page: https://gogo-react.coloredstrategies.com/app/pages/product/data-list
All the best.
Hello Ii have bought your gogo react admin template But I want to know how to use a chart from your project
can your give an example for me
Thanks Zaki
Hi Zaki,
You may find all the examples provided at the preview in the folder “Gogo-React”.
https://gogo-react.coloredstrategies.com/app/ui/components/chartsGogo-React\src\views\app\ui\components\charts.js
Cheers.
can you give me any example how to update data for chartjs2 in interval loop
Hi,
You may find an example below, it is basically changing data with the interval. You may change “src/components/charts/Line.js” file contents and check it at Charts page.
import React from "react";
import ChartComponent, { Chart } from "react-chartjs-2";
import { lineChartOptions } from "./config";
import { ThemeColors } from '../../helpers/ThemeColors'
const colors = ThemeColors()
export default class Line extends React.Component {
constructor(props) {
super(props);
this.state = {
data: {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [
{
label: '',
data: [50, 50, 50, 50, 50, 50, 50],
borderColor: colors.themeColor1,
pointBackgroundColor: colors.foregroundColor,
pointBorderColor: colors.themeColor1,
pointHoverBackgroundColor: colors.themeColor1,
pointHoverBorderColor: colors.foregroundColor,
pointRadius: 6,
pointBorderWidth: 2,
pointHoverRadius: 8,
fill: false
}
]
},
value:50
};
if (this.props.shadow) {
Chart.defaults.lineWithShadow = Chart.defaults.line;
Chart.controllers.lineWithShadow = Chart.controllers.line.extend({
draw: function (ease) {
Chart.controllers.line.prototype.draw.call(this, ease);
var ctx = this.chart.ctx;
ctx.save();
ctx.shadowColor = "rgba(0,0,0,0.15)";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 10;
ctx.responsive = true;
ctx.stroke();
Chart.controllers.line.prototype.draw.apply(this, arguments);
ctx.restore();
}
});
}
}
render() {
const { data, shadow } = this.props;
return (
<ChartComponent ref='chart_instance'
type={shadow ? "lineWithShadow" : "line"}
options={{
...lineChartOptions
}}
data={this.state.data}
/>
);
}
componentDidMount() {
console.log(this.refs.chart_instance);
setInterval(() => {
this.setState({
value: this.state.value+1,
data:
{
labels: ['Mon'+this.state.value, 'Tue'+this.state.value, 'Wed'+this.state.value, 'Thu'+this.state.value, 'Fri'+this.state.value, 'Sat'+this.state.value, 'Sun'+this.state.value],
datasets: [
{
label: '',
data: [this.state.value, this.state.value, this.state.value, this.state.value, this.state.value, this.state.value, this.state.value],
borderColor: colors.themeColor1,
pointBackgroundColor: colors.foregroundColor,
pointBorderColor: colors.themeColor1,
pointHoverBackgroundColor: colors.themeColor1,
pointHoverBorderColor: colors.foregroundColor,
pointRadius: 6,
pointBorderWidth: 2,
pointHoverRadius: 8,
fill: false
}
]
}
})
}, 2000);
}
}
Hello ,I used Recent Orders section in dashboard ,I have problem with item images it was appeared in different size ? how can i solve this problem ?
Hi,
We have implemented them in a way that all the images would at least have same width and height would be managed by css but I guess it was not a very good assumption.
You may add below lines to “src/assets/css/sass/_gogo.style.scss” file to define a max-width for the thumbnails in the dashboard. You may also add it with an inline style to the img element.
.dashboard-list-with-thumbs .list-thumbnail { max-width: 100px; }
Have a good one.
Thank you
Dears,
This is about changing the width for the React Tables column. I’d like to show all my props.value. Example of my props.value is “This is a very long description” but it is showing only partial of the value “This is a ver”.
Example code below, i created a new css called “long-width” but seems doesn’t achieve what i need. Please advise.
.long-width {
width: 200px;
}
{
Header: "Sales",
accessor: "sales",
Cell: props => <p classname="text-muted long-width">{props.value}</p>
},
Hi,
You may add “minWidth” and “maxWidth” properties to column objects.
columns: [
{
Header: "First Name",
accessor: "firstName",
minWidth: 200
},
...
]
Dear.
How do you recommend making Graphql calls? Similarly to redux/auth/sagas.js?
Best regards.
Hi,
You may implement your calls with Saga and you may find examples for it under redux folder. Some of them uses static data but it should be helpful to grasp the concept. Or you may call your api within the component and you may find an example for it in the data-list page.
The choice basically depends on the data and where it is used. If you will need to call an api method from multiple components, then implementing them via Saga would be beneficial.
Cheers.
Hi.
I’m using your Gogo – React Admin Template to build a Web App. I’ll like to understand how should I pass the logged user information to the TopNavBar (where user name and picture should be shown).
Thanks for your help.
There is a user property within the state at src/redux/auth/reducer.js with the case LOGIN_USER_SUCCESS. You may attach desired properties such as name and image path to this object and read them in topnav via redux state. Currently only uid is attached.
You may find other properties provided by Firebase below. https://firebase.google.com/docs/reference/js/firebase.User.htmlCheers.
Hello, I’m new here on the platform and not yet so familiar with web themes. I am looking for a suitable frontend theme for our React project (React version: 16.10.2 with npm). Therefore I have a few questions:
1. We are using Bootstrap in Version 4.4.1 and React in version 16.10.2. Are the versions compatible with the versions supported by this theme?
2. We are also using React-Bootstrap instead of Reactstrap for components. Can this work?
3. And last but not least, is there a way to get a trial version to check compatibility before you finally buy the product?
Hi,
React version should be fine but React-Bootstrap is definitely a deal breaker since tags and props may differ.
As for providing a trial version, it’s against Envato rules.
All the best.
How to get modal input data onSubmit ? Should I use Formik.
Ignore this,I found it
