I am currently using the react-calendly package and everything is working as expected. I am able to pick a date, etc. and post the event to the calendar. The only issue is below the calendar there are 3 gray dots showing the widget is loading. They never go away, the widget appears to be in a constant state of loading. Is there a reason this is happening? Or maybe could offer a separate solution as opposed to the package I am using. Click https://m44fc.csb.app/ to see what I am talking about. Here is the code pen if you would like to test a solution https://codesandbox.io/s/dreamy-dewdney-m44fc?file=/src/App.js
My code is as follows:
import React, { useState } from 'react'
import { InlineWidget } from 'react-calendly'
function App() {
return (
<>
<InlineWidget
url='https://calendly.com/myURL'
utm={{
utmCampaign: 'Spring Sale 2019',
utmContent: 'Shoe and Shirts',
utmMedium: 'Ad',
utmSource: 'Facebook',
utmTerm: 'Spring'
}}
/>
</>
)
}
export default App
getting the following issue in my chrome dev tools:
Resolve this issue by updating the attributes of the cookie:
Specify SameSite=None and Secure if the cookie is intended to be set in cross-site contexts. Note that only cookies sent over HTTPS may use the Secure attribute.
Specify SameSite=Strict or SameSite=Lax if the cookie should not be set by cross-site requests
Is there something I need to do to resolve these?
Looks like the React component is missing an important style property. We'll look into patching it, but in the meantime the workaround is to pass the following styles yourself when you're using the component:
<InlineWidget
url="https://calendly.com/robert-612/complimentary-consultation"
utm={{
utmCampaign: "Spring Sale 2019",
utmContent: "Shoe and Shirts",
utmMedium: "Ad",
utmSource: "Facebook",
utmTerm: "Spring"
}}
styles={{
minWidth: "320px",
height: '630px',
position: 'relative',
}}
/>
The minWidth and height values are taken from the component's defaults, the position: relative is what was missing. This should ensure that the widget always covers the loading dots, no matter what the page size is.
Related
I am writing a react application. A core requirement is that the application be completely dynamic and configurable, including choosing layouts, sections and fields, validation etc.
I have two UI. One is the config UI where the user can select the layout, sections, fields like what type of html component etc. Once this is saved, I get data as JSON where I need to draw the UI. This is my second UI. My concern is how do I structure the components to render the UI with the JSON data. The fields & sections will be same but the layout will be different based on what is been selected in the config UI. Below is the rough JSON schema.
{
title: "Test title",
layout: [
{
name: "layout-a"
},
sectionA: {
name: "breadcrumbs"
field: [
{
name: "test",
value: "test",
type: "text"
}
]
},
sectionB: {
name: "actions"
field: [
{
name: "Create",
value: "Create",
type: "button"
}
]
}
]
}
I was thinking of having a layout component which renders all the children from the JSON. Component looks like below
const Layout = ({ children }) => {
return (
<div>
<div className="container">
<div className="content">{children}</div>
</div>
</div>
);
};
and top level component where we read the config json and based on the layout render the component
<Layout>
{viewToShow === "layoutA" && <LayoutA data={config.sections} />}
{viewToShow === "layoutB" && <LayoutB data={config.sections} />}
</Layout>
My question is how do I construct the LayoutA, B or C component so that these sections and fields are rendered differently on the UI?
I think your question leaves a lot of unspecified points for us to offer you a proper solution. My advice is to investigate better what the project real needs are and its main goals, then lay out each piece (component) thoroughly checking what should be "configurable" and to which extent, before coming up with any implementation.
Taking your example "as is", my first thought is to wrap your App component into a Context provider, similar to what we'd do to manage themes.
export const layouts = {
layoutA: {
background: '#fff',
sectionWidth: '100%',
},
layoutB: {
background: '#000',
sectionWidth: '50%',
},
};
export const LayoutContext = React.createContext({
layout: layouts.layoutA, // default layout
toggleLayout: () => {},
})
You could then further populate the layouts object with metadata from a database. Supposing changes do not originate from the UI (think Webflow or Wix Editor), you could use a CMS to update the metadata and propagate the changes.
An example usage would be:
function LayoutTogglerButton() {
return (
<LayoutContext.Consumer>
{({ layout, toggleLayout }) => (
<button
onClick={toggleLayout}
style={{ backgroundColor: layout.background }}>
Toggle Layout
</button>
)}
</LayoutContext.Consumer>
)
}
Again, there are a lot of unspecified points on your request for us to be more specific. The request for "an application to be completely dynamic and configurable, including choosing layouts, sections and fields, validation etc" could mean many things.
Examples of more specific questions: How to create dynamic forms in React with functional components? How to create drag and drop dashboard widgets with React? How to live update/customise themes with styled-components?
Perhaps you could be more specific? Cheers
I am researching a possibility to do something similar. An off the bat approach would look somewhat like this: https://codesandbox.io/s/still-sun-cecudh?file=/src/App.js
Then of course, where this the layout object will be generated and where the parsing will take place will dependent on your use case. I am going with context for layout object generation and a dedicated component for object tree traversal.
I'm building an e-commerce site, the Cart page holds the checkout process's button.
I created an .env file inside front-side folder, then pasted in my Publishable key:
.env code:
REACT_APP_STRIPE = pk_test_51LJh5TCx0CP76PWrc0hRSESvbF00x8voeXAS...
Cart.jsx page code:
import StripeCheckout from "react-stripe-checkout";
const KEY = process.env.REACT_APP_STRIPE;
//...
<StripeCheckout
name="ShopTn"
image="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTWHNj9PK7N9WLGXRF5FDbA7XdtjH6caLiwnBW2__PWC3crRyS_XiocBVKnP9GONqvVp9A"
description={`Your total is ${cart.total} DT`}
billingAddress
shippingAddress
amount={cart.taotal * 100}
currency="TTD"
token={onToken}
stripeKey={KEY}
>
<Button
style={{
border: "none",
width: 120,
borderRadius: 5,
padding: "20px",
backgroundColor: "black",
color: "white",
fontWeight: "600",
cursor: "pointer",
}}
>
CHECKOUT NOW
</Button>
</StripeCheckout>
Warning errors i'm receiving:
I'm getting this error in console.dev:
Warning: Failed prop type: The prop stripeKey is marked as required in ReactStripeCheckout, but its value is undefined.
Edit (Please ignore this edit part):
upon pressing CHECKOUT NOW button, i'm expecting to open stripe checkout interface directly, but i'm getting this JS alert saying:
Stripe Checkout is missing the required key parameter. Please contact the website owner or support#stripe.com.
Edit:
I tried put my publishable key in JSX (like this code below) and it works fine:
const KEY = "pk_test_51LJh5TCx0CP76PWrc0hRSESuLLs9TSjpI7bUnDdgu4r0w";
The first error you are receiving is about a .map you are using in the Cart method that is not settings key property to each element created Read this for more information.
You have a spelling mistake in amount={cart.taotal * 100}.
And verify that the .env variables are getting loaded, for example by putting them into the JSX and verify their content.
Edit:
The code is all working correctly, the problem was solved by restarting the project after editing the .env, as it doesen't reload the key if using nodemon or similars (unlike next.js).
I have the following configuration in the antd.customize.less file:
#btn-primary-bg: #ffe900;
#btn-primary-color: #primary-color;
#btn-default-color: #primary-color;
#btn-default-bg: #ffffff;
On hovering a primary button everything is ok, but on hovering a default button the text color in the button changes to #btn-primary-bg, which I want to override, but I couldn't find any property like "#btn-default-hover-color" here. How can this be overridden, if at all?
I faced the same issue but I'm still looking for a better solution. However, for the moment, I can suggest that you add something like this to your global style file:
.ant-btn-default:hover, .ant-btn-default:focus {
border-color: #bee2e5;
color: #fff;
}
UPDATE
After antd has been updated to version 5.0.0 there is a prettier way to do it using ConfigProvider.
Let's suppose we have wrapped our App and assigned to the theme an object with parameters.
<ConfigProvider theme={{
components: {
Button: {
colorPrimaryBorderHover: 'red',
colorPrimaryHover: 'lightgray',
colorPrimary: 'red',
colorPrimaryActive: 'lightgray',
colorPrimaryTextHover: 'lightgray',
}
}
}}>
<App />
</ConfigProvider>
Acctually there are a lot of parameters to customize the appereance of your app which you can find in your
node_modules/antd/es/config-provider/context.d.ts file
However your config might be huge but to keep your code readable you might pass this object with interface of ThemeConfig as an exported value from another .ts file.
<ConfigProvider theme={myCustomTheme}>
...
Working with reassigning less variables. Thied to edit everything that connected with #primary-color, nothing changed color generated by Antd for hover/active state. Looks like there is no way to do this with less variables.
Trying to make Full-Calendar component for reactjs, and fill it up with events retrieved from firestore database (Retrieving the events when changing the month).
But no matter what i do, i receive the error about dateProfileGenerator, so the code below is the code that i use just i deleted the part where i retrieve from the db, and still does not work.
import React from 'react';
import FullCalendar from '#fullcalendar/react';
import dayGridPlugin from '#fullcalendar/daygrid';
import interactionPlugin from '#fullcalendar/interaction';
Receiving this error:
TypeError: dateProfileGenerator is undefined
Here is the code i am trying to run.
const DemoCalendar = () => {
return (
<FullCalendar
headerToolbar={{
left: 'prev, next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek, timeGridDay, listMonth'
}}
initialDate={new Date()}
navLinks="true"
businessHours="true"
editable="false"
selectable="true"
events={[
{
title: 'Business',
start: '2021-05-05T10:00:00',
end: '2021-05-06T10:30:00',
constraint: 'businessHours',
color: '#257e4a'
},
{
groupId: 'available',
start: '2021-05-06T10:00:00',
end: '2021-05-06T10:30:00',
display: 'background'
}
]}
plugins={[dayGridPlugin, interactionPlugin]}
initialView="dayGridMonth"
/>
);
};
};
Thanks in advance.
I also encountered this error using React. I still don't know what's wrong, but it works after I moved my main code to the React project example here:
https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/react
I then installed #fullcalendar/list additionally, which is not included in the original example.
My guess is I might have mistyped something or I didn't not install #fullcalendar/list correctly. For your case I think you may have forgotten to enter this line of code
import listPlugin from '#fullcalendar/list'
If not, you can try to modify the React example project. Maybe moving your code to a new project also works. Reinstalling the whole node_modules doesn't help.
Update: Changing the folder name helps when I encountered another error today.
so I've recently introduced myself to Highcharts and I did create a hardcoded dummy chart on my app. However I'm having issues with mainpulating the placement specifically of the LEGEND circles. So here's the Link i drew code+inspiration from :
https://github.com/whawker/react-jsx-highcharts/blob/gh-pages/examples/Combo/App.js
And here's some of my code :)
render() {
const pieData = [
{
name: "Jane",
y: 17
},
{
name: "John",
y: 13
},
{
name: "Joe",
y: 20
},
{
name: "Ivan",
y: 50
}
];
return (
<HighchartsChart>
<Legend />
<YAxis id="number">
<PieSeries
id="total-consumption"
name="Total consumption"
data={pieData}
center={[300, 120]}
size={255}
showInLegend
/>
</YAxis>
</HighchartsChart>
);
so basically yeah I need the legend to move from the bottom to the right side etc , oh and as well as I'm not sure how to manipulate/display the values instead of the names on the chart itself .
Thanks in advance for ANY feedback and tips,
Yours truly ,
Victor (a confused Intern still)
As far as I can see from the examples of the react-jsx-highcharts library you are using the <Legend> component has some props that allow positioning.
To e.g. align it on the right try this:
<Legend layout="vertical" align="right" verticalAlign="middle" />
The documentation seems to be more than incomplete so your best chance is to look into the examples or dig into the source yourself to see which props might help you.
In most cases the components seem to be passing configuration options given as props to Highcharts as they are:
The intention of this library is to provide a very thin abstraction of Highcharts using React components. This has been achieved by passing Highcharts configuration options as component props.
In the vast majority of cases, the name of the configuration option, and the name of the component prop are the same.