We are using the Semantic React UI library. The code often looks like:
<div className="EditTemplateMetaDataPage">
<Page title={...}>
<Container text>
<Segment>
<Grid columns={1}>
<Grid.Column>
<Button ...>
This might be interesting for many people, using similar React Component libraries like Material UI or Bootstrap React.
We currently use mount with the enzyme library instead of shallow, because we would render only one level deep
, to the first <Grid> component in a test, which is just a visual helper, while we really need the deeper buried Button instead.
Because of performance and to avoid overlapping tests it is recommended to use shallow. (We follow London school TDD, and check only that sub-components exist and their interfaces are used properly)
We came up with using CSS-only for visual components, i.e.
<div className='ui one column grid'>
instead of:
<Grid columns={1}>
But we are not sure, whether this is the optimal approach. Do you have other ideas? How can we use shallow(...) in this case?
shallow actually allow you to use your component as selector, so you can do something like
import Button from '../Button'
const page = shallow(<Page />)
expect(page.find(Button).length).toBe(1)
http://airbnb.io/enzyme/docs/api/selector.html
Related
I was using the conventional import './App.css' and just use className to effect the styling for my react application.
I structured my react app to have a dashboard view component that renders the various dashboard components (profile, stats etc) so I had to import all the dashboard components to the view component and Link them using Routes.
But I noticed that the dashboard view wasn't displaying as I wanted it to, so I went to the inspect tab and to my surprise ALL the css styling of ALL the imported components which had corresponding classNames were affecting each other. So I decided to use .module.css which would render the styling exclusively, but this is my problem... my code is HEAVY and it is unproductive to change className="tool-links flex-column" to className={`${styles.tool-links} ${styles.flex-column}`} one after the other by hand.
Is there any tool I could use to do this over thousands of lines of codes effectively? Thank you. Pardon any typos
Having pondered about this question for 24 hours I discovered a walkaround.
Instead of changing from conventional css styling to css modules, I could just add a prefix to the class names to differentiate every styling from each other e.g( className="content" now becomes className="edit-profile-content" and no two classNames would be the same, and this could be done easily with VSCode Find and Replace tool. I think it's just common sense.
I'm starting a new UI-library with bit.dev
However I can't find any information or docs on how to add a "global" Provider to these compoonents?
I have several apps I want to use this UI-library with different theme colors.
I don't want to hardcode the colors into each component so I want all my components to be wrapped in a "global" ThemeProvider of some sort to supply the colors.
How can you accomplish this with bit.dev?
Do I really wrap every single component with a ThemeProvider like this:
<ThemeProvider theme={theme}>
<Button {args}>
{args.children}
</Button>
<ThemeProvider>
That seems a little strange, and I want each app to be able to supply it's own Theme (not hard-code one into the ui-components library)
I also don't want to have to supply a theme to every single component I import in my library.
Ideally they will just pick up my already existing ThemeProvider w/ emotion-css, or worst case I have to add another Provider that supplies the theme to all my bit.dev components?
Would really appreciate some help on how to do this with bit.dev? I feel like I'm missing something simple.
I have searched quite thoroughly with not much luck. I am having trouble implementing a simple custom dropdown select element for my application.
I am hoping for a cross-platform (iOS & Android) solution like the simple custom JS dropdown featured here https://www.w3schools.com/howto/howto_custom_select.asp
Is this something I should just be creating myself with react native views and some state? I'm still trying to get a feel of what solutions are unrealistic. Could anyone give me an example from a professional project?
I am trying to avoid using the native Picker from here since I cannot style them to match my designer's needs. https://github.com/react-native-community/react-native-picker
I tried this package but it seems to be having trouble with the latest versions and I need something reliable. https://github.com/sohobloo/react-native-modal-dropdown
I was also looking at this package as it seems to be nearly perfect for my needs but again it has not been updated in 2 years https://github.com/n4kz/react-native-material-dropdown
My recommendation would be to go with something out there, as I will generally make implementation quicker for you, although as you say there might be a trade off in styling.
I've recently been in the situation a few times where I've really had to look hard for good, maintained components for React Native, but they certainly exist.
I've been successfully using react-native-paper recently. You could consider their accordion drop down list but may not suit in styling as it follows material UI guidelines.
https://callstack.github.io/react-native-paper/
I used this in my project and it works perfectly:
https://github.com/mrlaessig/react-native-autocomplete-input
you can just use the onFocus prop to make it dropdown with a click instead of when the user firsts typing and onEndEditing prop to hide it when the user selects an option.
here's my full implementation for reference, I had to go into the code a bit to check for these props since the documentation didn't include it.
<Autocomplete
data={filterNames()}
placeholder={'Who are you here to see?'}
onChangeText={item => setTextAndShowResults(item)}
onFocus={() => setHideResults(false)}
onEndEditing={() => setHideResults(true)}
defaultValue={getDefaultValue()}
keyExtractor={(item, i) => {
return item.id;
}}
returnKeyType={'next'}
listStyle={styles.listStyle}
inputContainerStyle={styles.borderWidth0}
style={styles.autoCompleteButtonStyle}
hideResults={hideResults}
renderItem={({ item, i }) => (
<TouchableOpacity onPress={() => setTextAndHideResults(item)}>
<Text style={styles.listTextStyle}>{item.name}</Text>
</TouchableOpacity>
)}
/>
I know it is not recommended to define styled components inside the render function (or inside stateless function components) because of the performance issues. However, I wonder if using the css method in a render function will also affect the performance negatively?
function Component = ({children, ...props) => (
<div css={`margin-bottom: 1rem`}>{children}</div>
);
Thanks!
After some testing, it appears that the css prop is similar to creating a memoized styled.element component. Component re-renders don't recreate the class name and state/prop manipulations act exactly same as a standard styled component -- when CSS properties have been altered, it either generates a new class or reuses an old one depending on how the CSS was changed. That said, the major downside to this approach would be that it requires babel-plugin-styled-components or babel-plugins-macro plus styled-components/macro to be added to your dependencies (if using styled-components/macro, it has to be imported into EACH file) which may or may impact application compilation times and make your application larger.
So, if you're OK with the above, then you shouldn't notice too much/any application performance difference. But, is it really worth the extra dependency/dependencies plus additional babel configuration to save yourself from doing this:
import styled from "styled-components";
export default styled.div`
margin-bottom: 1rem;
`;
which achieves the same result as above, but with less dependencies/less configuration/less effort. I don't know, that's up to you...
I am new to react and wondering using react with REBASS : https://github.com/rebassjs/rebass for ui component design and responsiveness, but syntax i say bothers me as they are objects created in render function.
Doesn't it will create unnecessary re-renders ?
if not why not. Not able to understand.
<Box css={**{color:blue}**} width={**[1,1/2,1/4]**} />
https://github.com/rebassjs/grid
Any thoughts?
In my thinking, you want to use the styling is react-app.
if you want make the other styles.css, you have to make it first, and then import the style.
For example, import ./styles.css -> this styles.css have to same located your react App. if you wanna change this, you can control by use './', '../'
and then --> comes from the style.css.
When you want to add the style, you have to use the "ClassName"
The other ways find this~! react_Style ways
Have a good day~!
enter link description here