So I am writing a functional component right, I written a props.
So I wanted it to able to auto suggest name attributes. Something like this
import { Ionicons } from "#expo/vector-icons";
export interface ownWrittenProps {
leftIcon?: ????????;
}
so when people start typing <FunctionalComponent leftIcon=" it can suggest the acceptable icon names from Ionicons the reason I want to use it because it pack into the ios/apk package anyway. What should I put in ???????? so that it can suggest the name?
Another question, if I have a textbox in my ChildComponent how do I retrieve the text/value from parent?
#expo-vector-icons exposes a glyphMap for each icon type. You can use this to generate the name suggestions.
import { Ionicons } from '#expo/vector-icons';
export interface ownWrittenProps {
leftIcon?: keyof typeof Ionicons.glyphMap;
}
This will create a type from the map, then make sure that only keys of that type can be used when setting leftIcon.
If suggestions didn't work you can directly find icon name from Ionicons official website and use it like a component.
Example:
import { Ionicons } from '#expo/vector-icons';
<Ionicons name="add-outline" size={24} color="black" />
or
import { Ionicons } from "#expo/vector-icons";
export interface ownWrittenProps {
leftIcon?: "add-outline";
}
Related
I am creating my own custom "wrapper" around a chakraui component, so I can add my own props, methods and whatever I might need later on.
However, one downside of doing this is that I don't get suggestions for the imported chakraui-Button proptypes in Visual Studio Code, but only the new proptype "testPropColor". The other properties are still working, but is there any way of passing them further down so I can see them as suggestions as well?
What I have is this:
custom-component/button.js
import { Button as ChakraButton } from '#chakra-ui/react'
export default function Button(properties) {
const { testPropColor, children, ...props } = properties
return (
<ChakraButton color="testPropColor" {...props}>
{children}
</ChakraButton>
)
}
And how I am using this in a view:
import Button from 'custom-component/Button'
export default function ViewComponent() {
return (
<Button
bg="red"
testPropColor="blue">Test</Button>
)
}
Javascript doesn't come with type support. So no type-intellisense in VSCode.
I highly highly highly suggest adding TypeScript to your JS React project.
e.g:
interface ButtonProps extends ChakraButton {
// you need to get the `ChakraButton` properties type, from '#chakra-ui/react'.
// You should be able to import it.
testPropColor: string;
bg: string;
}
export function Button(properties: ButtonProps) {
}
Just a quick article I found for example here.
If for some reason you don't add TS(?!. you really should) -> then there's prop-types, but I don't suggest using it, compared to TS.
import PropTypes from 'prop-types';
Good luck
Hello there fellow programmers.
I am currently experiencing an issue with my own styles created using makeStyles(...). What's happening is; when I import my styles constant which is exported from another module, the style block is placed before the other MUI styles which causes mine to be overriden. I have not yet been able to find any solution to this what so ever and that is why I am here today, trying to figure out how I could possibly go my ways to fix this. Here's an image that contains the order of the style blocks that is playing with my mind currently.
PLEASE NOTE: The style block that's mine is the one with the data meta of makeStyles. Another thing is, I've attempted to use StylesProvider.
IMPORTANT: This only happens when uploaded. It works just fine on localhost, but this is the outcome of being uploaded to vercel.
Here's two examples of usages:
import { Theme } from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles';
const DarkTheme = makeStyles((theme: Theme) => ({
mdButton: {
backgroundColor: "#404040"
},
}));
export default DarkTheme;
import {Button} from '#material-ui/core';
import React from "react";
import DarkTheme from 'DarkTheme';
export default function Example() {
const styles = DarkTheme();
return (
<Button className={styles.mdButton}>
Example
</Button>
)
}
Any help is appreciated, thank you in advance.
As you may know, f you have two CSS classes applied to the same element with the same degree of specificity, then the winner will be the CSS class that is defined last within the document (based on the order of the elements in the , NOT the order of the class name strings in the class attribute of the element being styled). As: Material UI v4 makeStyles exported from a single file doesn't retain the styles on refresh
So, you can change order of imports. Import Button before import style.
Let try with what is different from:
import React from "react";
import {Button} from '#material-ui/core';
import DarkTheme from 'DarkTheme';
and
import React from "react";
import DarkTheme from 'DarkTheme';
import {Button} from '#material-ui/core';
makeStyles returns a function which must be called as a React hook. So please name it in consequence.
const useDarkTheme = makeStyles((theme: Theme) => ({
mdButton: {
backgroundColor: "#404040"
},
}));
export default useDarkTheme;
https://reactjs.org/docs/hooks-intro.html
If you don't want to use hooks you can check withStyles alternative: https://material-ui.com/styles/basics/#higher-order-component-api
You can also check how CSS injection works in material-ui https://material-ui.com/styles/advanced/#css-injection-order (tl;dr: order of makeStyles calls matter).
I want to be able to use a Font Awesome icon in a React component by passing the name of the icon to the component as a string. I have it working like this:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { library } from '#fortawesome/fontawesome-svg-core';
import { fas } from '#fortawesome/pro-solid-svg-icons';
import { fal } from '#fortawesome/pro-light-svg-icons';
import { far } from '#fortawesome/pro-regular-svg-icons';
const Icon = (props: IconProps): ReactElement => {
if (props.iconPrefix === 'fas') library.add(fas);
if (props.iconPrefix === 'fal') library.add(fal);
if (props.iconPrefix === 'far') library.add(far);
return (
<div>
<FontAwesomeIcon
icon={[props.iconPrefix
? props.iconPrefix
: 'far',
props.iconName]}
I am following roughly these guidelines.
The problem is is that this bloats the minified package size by 4MB but I want a solution where any icon name can be passed as a string without importing the whole library of icons.
What is the solution to this?
For my solution I want users to get all components from my library.
Example: import Checkbox from 'MyLibrary';
But for native, I'm don't want to make all the components my self. At least, not now. And that is why I want them to reference my library, so when I do change/write the component, it will automaticly update at their end.
For example, a checkbox. There is a default react-native checkbox (https://facebook.github.io/react-native/docs/checkbox)
I would like to export this default component within my component.
I tried things like:
export { Checkbox as default } from 'react-native';
and
import { Checkbox } from 'react-native';
export default Checkbox;
and
import React from 'react';
import { Checkbox as ReactCheckbox } from 'react-native';
const Checkbox = (...props) => <ReactCheckbox {...props} />;
export default Checkbox;
But that didn't work. Any suggestions?
Edit: I made a mistake with the import, it's CheckBox not Checkbox...
It's CheckBox, not Checkbox, doh!
I'm not quite sure but, while I tried your code it didn't worked on mine too. But, you can do like this:
import { TextInput as myTextInput } from 'react-native';
But, while I checked this on expo app:
import { CheckBox as myCheckBox } from 'react-native';
From this what I think is react native doesn't support CheckBox on Expo app. But, if you libraries like React Native Elements or Native Base. Then you can import checkbox like this.
import { CheckBox as myCheckBox } from 'react-native-elements';
Maybe this Snack will help you.
Happy coding :)
If I understand you correctly, you want to RE-EXPORT the React/Community checkbox as your component and replace it with your own component in future?
Native Checkbox component is only available in Android, so you have to use community built one from UI-Kitten/Native Base/React Native Element.
First explore and pick your UI Library and install it. Then you can import the checkbox component from the respective library and export it until you write your own component.
This will work
import { CheckBox } from 'react-native-elements';
export default CheckBox;
In case you want to wrap the component with default properties or styling then you can do something like below
import { CheckBox } from 'react-native-elements';
export default function(props) {
const yourProps = {
checkedIcon: <Image source={require('../checked.png')} />,
uncheckedIcon: <Image source={require('../unchecked.png')} />
};
return (
<CheckBox {...yourProps} {...props} />
);
}
EDIT: I installed the v1.0.0.36 beta version and copied the sample from that versions docs (which looks identical to me) and it worked straight away. Not sure what the problem was but thanks for replies
I am trying to use Material-UI's withTheme to access the theme in a component.
I have followed the sample in the docs which goes through the create-react-app packager ok but in the browser gives the error: TypeError: Object(...) is not a function
and highlights the code line > 17 | export default withTheme()(WithTheme);
I have cut down the sample code to the most basic use of withTheme() and am still receiving this error
withtheme.js
import React from 'react';
import { withTheme } from 'material-ui/styles';
function WithTheme() {
const styles = {
primaryText: {
color: 'red',
}
};
return (
<h1 style={styles.primaryText}>Hello</h1>
);
}
export default withTheme()(WithTheme);
EDIT: To help clarify the problem, here is the App.js file.
import React, { Component } from 'react';
import './App.css';
import 'typeface-roboto';
import AppBar from 'material-ui/AppBar';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {brown500, brown900} from 'material-ui/styles/colors';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import WithTheme from './components/withtheme';
const Theme = getMuiTheme({
palette: {
primary1Color: brown900,
primary2Color: brown500,
}
});
class App extends Component {
render() {
return (
<MuiThemeProvider muiTheme={Theme} >
<AppBar
title="Title"
iconClassNameRight="muidocs-icon-navigation-expand-more" />
<WithTheme />
</MuiThemeProvider>
);
}
}
export default App;
I have customised the theme and changed primary1Color to brown, using muiThemeProvider. This all works fine when I remove the WithTheme component from App.js - the AppBar is brown as expected. The problem is I am getting the error when I try to use the mui withTheme function.
My intention is to set the h2 in WithTheme component to be whatever color the current theme has for primary1Color
**End Edit
Any help would be appreciated. Happy to post the (almost) exact copy of the doco sample code which achieves the same error if required.
Thanks
As MaterialUI is no longer in Beta, the spec has changed a bit, outdating Liam's answer. Per the Material-UI
v3.1.2 docs
import { withTheme } from '#material-ui/core/styles';
export default withTheme()(WithTheme);
As of Material 4, the spec was changed a bit again: https://material-ui.com/styles/api/#withtheme-component-component (thus outdating Awnage's answer too).
So now it is:
import { withTheme } from '#material-ui/styles';
export default withTheme(MyComponent);
No need to use withStyles() unless if you want to make a specific style for the component
Warp your App with MuiThemeProvider then you are able to use the theme properly
Material-Ui 0.20.0
For access theme colors use getMuiTheme
import getMuiTheme from 'material-ui/styles/getMuiTheme';
export default muiThemeable()(App)
http://www.material-ui.com/#/components/app-bar
Working Demo
Material-Ui 1.0.0 beta
For access theme colors use withTheme
import { withTheme } from 'material-ui/styles';
export default withTheme()(App)
https://material-ui-next.com/demos/app-bar/
Working Demo V1
If you intend to change the theme of material-ui, I would prefer using getMuiTheme. Refer http://www.material-ui.com/#/customization/themes for documentation. What happens here is, you are styling your component with JavaScript and hence the export requires withStyles to be called.
export default withStyles(styles)(WithTheme);