by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • 03:54
    TahimiLeonBravo labeled #1718
  • 03:54
    TahimiLeonBravo unlabeled #1718
  • 03:53
    LeandroTorresSicilia commented #1839
  • 03:48
    LeandroTorresSicilia commented #1839
  • 03:35
    TahimiLeonBravo labeled #1839
  • 03:21
    TahimiLeonBravo assigned #1845
  • 03:21
    TahimiLeonBravo assigned #1850
  • 00:03
    codeclimate[bot] commented #1838
  • 00:03
    codeclimate[bot] commented #1838
  • 00:01
    commit-lint[bot] commented #1838
  • 00:01
    TahimiLeonBravo synchronize #1838
  • Sep 23 17:13
    TahimiLeonBravo edited #1742
  • Sep 23 17:13
    TahimiLeonBravo edited #1742
  • Sep 23 15:19
    TahimiLeonBravo edited #1847
  • Sep 23 14:35
    amontalvof review_requested #1852
  • Sep 23 14:35
    amontalvof review_requested #1840
  • Sep 23 02:39
    codeclimate[bot] commented #1852
  • Sep 23 02:38
    commit-lint[bot] commented #1852
  • Sep 23 02:38
    amontalvof opened #1852
  • Sep 23 02:37

    amontalvof on example-of-dynamic-row-action-in-table-component

    docs: example of dynamic row ac… (compare)

Tahimi
@TahimiLeonBravo
Hi @abhilashWipadika, we are going to launch a new react-rainbow-components version today
Tahimi
@TahimiLeonBravo
Hi @abhilashWipadika alredy is available the new version 1.16.0 of react-rainbow-components, here you can review the release notes https://github.com/nexxtway/react-rainbow/releases/tag/v1.16.0
Dinesh Singh
@mDinni
Hey guys, I was searching for tags Input . Are you working on that ?
Tahimi
@TahimiLeonBravo
Hey @mDinni we have not this component, but it should be a useful addition
Ramón Chancay Ortega
@devrchancay

Hi Everyone! I just made my first PR in the library, add a test to the "inputPhone" component I had to put extra validation on a custom hook, I understand that "mount" does not have certain events in the life cycle.

I await your comments.

1 reply
Ramón Chancay Ortega
@devrchancay
Dinesh Singh
@mDinni
err.png
Hi, I'm getting this error in nextjs
And here's isValidColor.js
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = isValidColor;

function isValidColor(color) {
  var element = document.createElement('a');
  element.style.color = color;
  return element.style.color !== '';
}
Jose Leandro Torres
@LeandroTorresSicilia
Yes, there are issues using server side rendering
@mDinni it is in our roadmap
Tahimi
@TahimiLeonBravo
@mDinni you can check some solutions nexxtway/react-rainbow#939, also we have one example here nexxtway/rainbow-next-experience#1
SquareSeed
@SquareSeed
Hi,
is there a way in the DatePicker to have it open on a desired month while leaving the initial value empty? I need it to start out with an empty value, but on click instead of opening on the current calendar month I want it to open on a custom month pulled from the state.
Jose Leandro Torres
@LeandroTorresSicilia
No, right now it is not possible
Can you provide more info about your use case, thus we can review it
SquareSeed
@SquareSeed
Gladly! I want to have users guess on a date that a child will be born on. The creator of the pool (expecting parent) gives the expected due date (for example December 15). Once the users (friends and family of the expecting parents) come to give their votes/bets/hunches they would click on a calendar that should in this case open on December by default, without having Dec-15-2020 already in the defaultValue of the calendar. Especially if the parents decide to describe the due date as "around Christmas", "mid-December" or similar, instead of picking a date.
Dinesh Singh
@mDinni
Hi,
How can I use the components which are in beta ?
Dinesh Singh
@mDinni
PhoneInput component
PhoneInput you can use it from version v1.16.0
Jose Leandro Torres
@LeandroTorresSicilia
@SquareSeed Thanks, we think it is a valid use case and we will add it to our road map, likely we will need to add a new prop in order to support this feature
SquareSeed
@SquareSeed
@LeandroTorresSicilia Thank you. Sounds great! Looking forward to seeing new updates.
Ghost
@ghost~5f59f16ed73408ce4fee899b
For form inputs I want my form labels to be left aligned. How can I achieve that?
jihad khorfan
@spyshow
Hi .... Are you considering including layout component in the next version ... I think its the most important thing to do next ...but for now do you recommend any responsive layout library
Zoltán Németh
@nemethzoli1997_gitlab
Hi! Why are we supporting only a limited set of HTML input props? (e.g. min and max props aren't defined on Input)
Tahimi
@TahimiLeonBravo
@Nabanit33503728_twitter right now the label is showing only centered, but we could discuss about that
minhho3199
@minhho3199
const theme = {
  rainbow: {
    palette: {
      brand: "#80deea",
      mainBackground: "#303030",
    //   secondaryBackground: "#383838"
    }
  }
};
const Container = styled.div`
  background-color: ${props => props.theme.rainbow.palette.background.secondary};
  height: 100%;
`;
ReactDOM.render(
  <Provider store={store}>
      <Application theme={theme}>
      <Container>
        <App />
      </Container>
    </Application>
  </Provider>,
  document.getElementById("root")
);
Can anyone tell me what I did wrong in this. I'm trying to change my whole application to the cyan dark mode from the Q&A but when I run it, it says that the rainbow prop is undefined. I don't know why I'm facing this because just a little while ago it was running as intended and I don't see any difference from the example code in the Q&A and mine.
Ghost
@ghost~5f59f16ed73408ce4fee899b
@TahimiLeonBravo thank you so much for letting me know about that. The number of components provided in rainbow components is shearly amazing. But these granular controls will be extremely helpful.
And I would also like to know if radio group component can be shown horizontally as a row or not? By default it shows only in column wise.
Jose Leandro Torres
@LeandroTorresSicilia
@nemethzoli1997_gitlab generally we limit the amount of props in a component, while use cases appear we will be adding props to support them, in this way we keep the components API as clean as possible and limiting possibles breaking change in the future
In this case max and min are valid uses of the input and we should add them, I will add it to our road map, thanks for you feedback
Tahimi
@TahimiLeonBravo
Hi @spyshow , I think that adding layout components can be very useful. Currently we use flex-box to build our UI. We will consider this addition, thanks for your feedback
Tahimi
@TahimiLeonBravo
@Nabanit33503728_twitter You are referring to the RadioGroup component right? https://react-rainbow.io/#/RadioGroup If so, that component now only supports landscape view but it would be a nice addition to be able to change the orientation.
Anyway maybe the RadioButtonGroup component can fit your use case https://react-rainbow.io/#/RadioButtonGroup
Thanks for your feedback, we will discuss your proposal
Hi @minhho3199 can you tell me which version of styled-components are you using? I think this could be the problem.
Zoltán Németh
@nemethzoli1997_gitlab
Is there a need to use the RenderIf component? Wouldn't it be easier and more standardized to just write {isTrue && <YourComponent>} ?
Jose Leandro Torres
@LeandroTorresSicilia
We use to not mix JS with JSX in order to keep the separation of concerns principal and the RenderIf is a reusable and declarative way of doing it.
Zoltán Németh
@nemethzoli1997_gitlab
@LeandroTorresSicilia Thank you for your answer.
minhho3199
@minhho3199
@TahimiLeonBravo It was the styled-compoents that caused the problem. I reverted back to ^4.3.2 and it solved it.
How can I manually customize the size of the Avatar component? I used the size prop and set it to large but it was too small for me so I want to make it a custom size
Zoltán Németh
@nemethzoli1997_gitlab
Does anyone have experience using the library with Next.js? I'm getting an error because Next.js cannot compile the components.
Jose Leandro Torres
@LeandroTorresSicilia
@nemethzoli1997_gitlab the library has issues when used with next.js, you can use some components but others will break your app, here is an example of how you can use it:
https://github.com/nexxtway/rainbow-next-experience
Although supporting next.js is in our road map
Zoltán Németh
@nemethzoli1997_gitlab
@LeandroTorresSicilia I would gladly contribute if someone could lead me in the right direction.
Tahimi
@TahimiLeonBravo
@minhho3199 you can make a custom size using the “className” or
“style” props, for example using style <Avatar style={{width: 100, height: 100}} src="images/user/user1.jpg" title=“John Doe" />
minhho3199
@minhho3199
@TahimiLeonBravo Thank you for the answer. There is an unrelated question that I want to ask. I see that the value prop of the Input component prevents you from editing the text in the input. However I need the value prop as I need to display info that I fetch from the back end. But now I'm unable to make edits to the input. I'm thinking that the solution is in the onChange prop but I don't yet know how to implement it
Jose Leandro Torres
@LeandroTorresSicilia
@nemethzoli1997_gitlab That would be great!! You can start by finding a component that don’t render in next.js then you can open an issue to discuss about what is the problem and how we can fix it, then when discussion is finished you can submit a PR with the fix.
Note that some components will work fine with ssr but others use things like the window or the document, then this will crash. We need to research about how the community solve this issues and the different approaches to takle this.
Jose Leandro Torres
@LeandroTorresSicilia
@minhho3199 the input is a controlled component that means that you will have to props to control it onChange and value, every time you type the onChange will send a new value and you need to keep a state to hold that new value and send it back to the input through the value prop like:
const [value, setValue] = useState(initValue);

return (
    <Input value={value} onChange={(event) => setValue(event.target.value)} />
);
I think we should add a controlled example with a initial value set in the input
minhho3199
@minhho3199
@LeandroTorresSicilia Thank you for the answer. That was very helpful