react-rainbow-components/community

Tahimi

@TahimiLeonBravo

if so, you need to wrap the entire application with the <Application> component

and define the mains colors on the theme

const theme = {
    rainbow: {
        palette: {
            brand: '#80deea',
            mainBackground: '#303030',
        },
    },
};

Tahimi

@TahimiLeonBravo

once you define the colors of the palette in the ʻApplication` component of your application, this will change those colors in all the components of your application

if you use an Application component that wraps only one component of your application this will only change the colors of that single component

Tahimi

@TahimiLeonBravo

this has been helpful to you ??

Dimitri Ivashchuk

@d-ivashchuk

@TahimiLeonBravo It is helpful, thanks! But I've tried it with one component which resulted in style change for the whole app. I am not sure what you are using under the hood but seems not to play well with Chakra UI. What about going for deeper customization of DateTime picker. How would you go with styling the modal, it seems like it's not within the scope of the component itself and is summoned on the upper app level - which makes it hard to style within the scope of that particular component.

Thanks a lot for helping again!

Jose Leandro Torres

@LeandroTorresSicilia

@d-ivashchuk If you want to change colors for one specific component, you can wrapp only this specific component with the application and pass your custom theme, which will cause only that component to get the custom colors

@d-ivashchuk right now we only let to customize some colors but not change other internal styles

We will add more customization in the future.

can you tell us what others styles do you want to be able to change?

Dimitri Ivashchuk

@d-ivashchuk

Thanks for clarifying. I want to implement dark theme to date-time picker, so basically all styles of the modal. Right now I will need to override with styled components on global level as it seems

Dimitri Ivashchuk

@d-ivashchuk

What would be helpful for date time picker - is being able to assign modal class at least, so I am able to find it in the app

or scoping modal to the component and not app highest level

minhho3199

@minhho3199

Is there any way that I can change the color of an individual event in the WeeklyCalendar component?

Tahimi

@TahimiLeonBravo

@minhho3199 right now it is not possible to change the color of a specific event, we are working on a solution that will be available in the next release :)

Maxx Greene

@maxxgreene

@d-ivashchuk this example implements light/dark mode https://rainbow-algolia-search.web.app/

There is a bunch of good questions being ask here. Let's leverage https://stackoverflow.com/questions/tagged/react-rainbow+or+react-rainbow-components+or+rainbow-components

it will be more helpful for new developer using the library

codeho

@codeho_gitlab

Hi Guys, i'm using DateTimePicker, and i'm trying to figure out a way to trigger the opening of the module automatically.

i'm a bit of a noob, but i'm happy to dig through any kind of links you have for me :)

Jose Leandro Torres

@LeandroTorresSicilia

@codeho_gitlab what you can do is click the input programmatically when mount the component like this:

const ref = useRef();

useEffect(() => {
    ref.current.click();
}, []);

return (
    …
    <DateTimePicker ref={ref} />
    …
);

Dimitri Ivashchuk

@d-ivashchuk

Hey people! Running into strange issue. Using rainbow-component , namely DateTimePicker. Import another third party library component and suddenly all the styling for rainbow-component is gone. Anyone experienced this?

Jose Leandro Torres

@LeandroTorresSicilia

@d-ivashchuk No, can you share the code that causes this?

minhho3199

@minhho3199

I see that the WeeklyCalendar component has added custom background colors to events in the calendar. I changed the react-rainbow-component version in package.json to 1.18.1 but the CalendarEvent interface, which I presume is what you pass into the events props of the component, doesn't have the backgroundColor and color field. I'm wondering if I did something wrong here since your github page has the correct code

Zoltán Németh

@nemethzoli1997_gitlab

Can someone tell me how Column's component prop works? From the examples I figured out that it's a function which can translate the column value into JSX. My question is can I reference somehow the whole row in the component function?

Anshul Agarwal

@AnshulAg03

I am trying to use date range selector,but its working as single data selector

Jose Leandro Torres

@LeandroTorresSicilia

@nemethzoli1997_gitlab yes, the component prop receive two props, value and row, value is the current cell value and row is an object with all row values, you can debug and see what props it receive. We are working on improve the documentation.

@AnshulAg03 you need to pass selectionType=“range”, also you can pass variant=“double” and it will show two calendars

Cat Carbonell

@catcarbonell

Hi everyone! Wanted to know how we can handle timezones when using the DatePicker calendar-- is there a way in JS or in the actual component we can set the timezone for the calendar so we have an accurate date?

Tahimi

@TahimiLeonBravo

Hi @minhho3199 in the version 1.8.1 this functionality is not available, we have already implemented it but we have not published it in a stable version yet. Currently we have a canary version of testing that we are testing 1.18.1-canary.e45b993 you can install it and use it taking into account that this version is not stable, soon we will publish a new version with that feature.

Jose Leandro Torres

@LeandroTorresSicilia

@catcarbonell The component does not know about timezone it only select a date and you can get the value in the onChange event and do whatever you want with the date. Can you give me more context about your use case?

Cat Carbonell

@catcarbonell

Ahh actually, I was trying to type out our problem, but I realized I just needed to tell my coworker that the timezone doesn't matter when using DatePicker.

Thanks! My bad.lol

minhho3199

@minhho3199

@TahimiLeonBravo Oh ok I'll wait for the stable release then. Thank you

I have a problem with using the Drawer component with MenuItem and MultiSelect. Right now I have these components inside the Drawer and I would like the Drawer to stay open when MenuItem is clicked, but it's working exactly the opposite way. Whenever MenuItem is clicked, it would close the Drawer

minhho3199

@minhho3199

It's as if whenever I click on a MenuItem, it runs onRequestClose on the Drawer component

Tahimi

@TahimiLeonBravo

Hi @minhho3199 you're using a ButtonMenu withMenuItem, right?

Tahimi

@TahimiLeonBravo

Hey guys!! It’s official! #Rainbow will be in the #JSConfMX. Join us from November 2nd-4th for the online event. See you there!

I share the link to cheer you up https://hopin.to/events/jsconf-mx-online

minhho3199

@minhho3199

@TahimiLeonBravo Yes, I'm using ButtonMenu with MenuItem. The problem also occurs when I use MultiSelect inside the Drawer as well

Tahimi

@TahimiLeonBravo

react-rainbow-components v1.19.0 is out! 🎉 Check the release notes here => https://github.com/nexxtway/react-rainbow/releases

@minhho3199 the new version now available, the bug on the ButtonMenu was fixed

soystiken

@soystiken

Failed building JavaScript bundle.
Unable to resolve "./fonts/Lato-Black/Lato-Black.eot" from "node_modules\react-rainbow-components\components\Application\rainbowLegacyStyles.js"

i am having this error

Jose Leandro Torres

@LeandroTorresSicilia

@soystiken can you give more context, like if you are using create-react-app or ssr, or some code example?

hgulersen

@hgulersen

@soystiken I got around that problem importing the component like this:
import DateTimePicker from "react-rainbow-components/components/DateTimePicker";
instead of this:
import { DateTimePicker } from "react-rainbow-components";

Jose Leandro Torres

@LeandroTorresSicilia

@hgulersen The main issue here is the Application component which has import some fonts, you can see here nexxtway/react-rainbow#939 to get a workaround, although we are working in moving the fonts to a cdn which will solve this problem, note that you can find issues with SSR in other components, we will be looking for them and will fix them in the time they arise up

Dimitri Ivashchuk

@d-ivashchuk

Hey team! I was exploring the possibility to use https://react-rainbow.io/#/WeeklyCalendar in one of my apps. Is it possible to click on the calendar inside and get the date. workflow would be adding events by clicking calendar :D

Nuno Pexirra

@npexirra

Hey, is there anyway to have VerticalNavigation component on the right? (and have the selected element's blue border on the left)

Where communities thrive

People

Repo info

Activity