Develop Reference

How to create Bootstrap-like shorthand props for React components?

What is the best way to achieve this behavior along with React + TypeScript?
import { Button, Card } from 'src/components';
const Page = () => (
<div>
<Card mx3 p3 flex justifyContentEnd>
/* Card content */
</Card>
<Button my2 mx3>
Login
</Button>
</div>
);
For instance, mx3 will add 16px margin horizontally, my2 will add 8px margin vertically, etc., similar to how the Bootstrap framework uses classes to apply utility styles easily.
I have looked through a few component libraries with this sort of behavior in order to find a suitable solution; however, I find most do not have strong typing support. Examples are RNUILib, NativeBase, Magnus UI, etc.

You can declare your props like that:
const styles = ['mx3', 'p3', 'flex'] as const
type Styles = Record<typeof styles[number], boolean>;
Then use them like this:
type CardProps = Styles & {
other: 'props here'
}
Now, this should work:
<Card mx3 p3 flex />
You can get applied props like this:
const values = Object.entries(props).map(([key, value]) => value ? key : null).filter(Boolean)

If you see the source code of react-bootstrap, they have mapped the boolean to some CSS class using a util function of classnames package. You can do the same:
...
...
<Component
{...buttonProps}
{...props}
ref={ref}
className={classNames(
className,
prefix,
active && 'active',
variant && `${prefix}-${variant}`,
size && `${prefix}-${size}`,
props.href && props.disabled && 'disabled',
)}
/>
...
...

How to Put Drawer below the Header React-JS

I'm new in react and I have useStyles in my code for changing the style of the drawer
const useStyles = makeStyles((theme) => ({
drawer: {
marginTop: 56,
}
}));
class PageMenu extends React.Component {
GetMenuItems() {
var classes = useStyle();
<div>
<Drawer
open={this.props.DrawerOpen}
anchor="right"
variant="persistent"
onClose={this.fixthew}
classes = {classes.drawer}
>
---some element------
</Drawer>
<\div>
}
}
render() {
return(
<div>
{GetMenuItems}
</div>
)
}
the problem is ReferenceError: useStyle is not defined and GetMenuItems should be before the render

Use withStyles instead of makeStyles for Class Components.

many mistakes:
You are using the useStyles hook in a class component (hooks are only for functional components)..
You defining the component as one of class methud... u shouldn't do so..
You pass the class in the classes prop instead of in className prop
instead use a functional component like so:
function MenuItems(){
var classes = useStyle();
return <div>
<Drawer
open={this.props.DrawerOpen}
anchor="right"
variant="persistent"
onClose={this.fixthew}
className = {classes.drawer}
>
---some element------
</Drawer>
<\div>
}
function PageMenu(){
return(
<div>
<MenuItems/>
</div>
)
}
if you are a beginner i can advice you to use functional component with hooks and learn the diffrences...
also, Matirial-Ui is a tough Library u better learn the customizations in this library and the ways they offer to style components... (there is many though..)

How can I break- line in Custom JSX Tag imported from another class in following snippet:

<Experience
startYear={2019}
endYear={2019}
jobName="First Job"
jobDescription="1. Providing API calls support for Headless CMS.2. Provide escalated ticket/incident management support"
/>
Here, I wanted to break line after 2nd point, I tried '\n' and br, this Tag is Made in JSX by following code:
import React, { Component } from 'react';
import { Grid, Cell } from 'react-mdl';
class Experience extends Component {
render() {
return(
<Grid>
<Cell col={4}>
<p>{this.props.startYear} - {this.props.endYear}</p>
</Cell>
<Cell col={8}>
<h4 style={{marginTop:'0px'}}>{this.props.jobName}</h4>
<p>{this.props.jobDescription}</p>
</Cell>
</Grid>
)
}
}
export default Experience;

I'd go by passing a jsx component as a prop to the child, instead of just raw text. This gives you more flexibility and control of how the UI will be rendered/ordered, within the parent component.
const Parent = () => (
<Child
jobDescription={(
<div style={{ flexDirection: 'column' }}>
<div>1. Providing API calls support for Headless CMS.</div>
<div>2. Provide escalated ticket/incident management support.</div>
</div>
)}
/>
)
const Child = (props) => (
<div>
<div>Child specific stuff</div>
{props.jobDescription}
</div>
)

Use an array, then loop the array to output for each item. Using string wont work because it is escaped when goes into props. Although Im aware that it might not be suitable for job description field.
Or, use you can write html tag in the string then render using https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml at your own risk.

Override CSS for MaterialUI's TablePagination's MenuItem

I don't know how to override CSS for child component MenuItem of TablePagination:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/TablePagination/TablePagination.js
I'm using the component as:
<TablePagination
colSpan={2}
count={2}
rowsPerPage={2}
classes={{
root: classes.root, caption: classes.caption
}} />
Here it seems tricky to pass the style to the MenuItem. Could you please suggest some solutions?
Seems a new version of material-ui supports this: https://github.com/mui-org/material-ui/pull/11200/files. But just wondering what I should do if I cannot upgrade ...
Thanks!

Found myself one work-around. Basically its done by creating a SelectProps object:
selectProps = {
MenuProps: {
classes: {
paper: "bar"
}
}
};
Then in the TablePagination usage I use it:
<TablePagination SelectProps={this.selectProps} />
This gives the parent element of the select a CSS class called "bar". I then just override the CSS for "bar".

How to write a wrapper around a material UI component using React JS?

I am using Material UI next library and currently I am using List component. Since the library is in beta, lot of its parameter names get changed. To solve this I am planning to write a wrapper around the required components so that things wont break. My list component :
<List dense>
<List className={classes.myListStyles}>
<ListItem disableGutters/>
</List>
</List>
How should I write the wrapper for the List(say myListWrapper) and ListItem so that the wrapper component can handle props and pass them to the actual MUI list component inside?

I had worked on MUI wrappers, writing my own library for a project. The implementation we are focusing, is to pass the props to inner/actual-MUI component from the our wrapper component. with manipulation. In case of wrapping props for abstraction.
Following is my approach to the solution:
import { List as MaterialList } from 'material-ui/List';
import { React } from 'react';
import { ListItem as MaterialListI } from 'material-ui/ListItem';
class List extends MaterialList {
constructor(props){
const propsToPass = {
prop1 : change(props.prop1),
...props
}
super(propsToPass);
}
};
class ListItem extends MaterialListItem {
const propsToPass = {
prop1 : change(props.prop1),
prop2 : change(props.prop2),
...props
}
super(propsToPass);
}
};
class App extends React.Component {
render () {
return (
<List prop='value' >
<ListItem prop1={somevalue1} prop2={somevalue2} />
<ListItem prop1={somevalue1} prop2={somevalue2} />
<ListItem prop1={somevalue1} prop2={somevalue2} />
</List>
)
}
};
Above code will allow following things to do with your component:
You can use the props with exact names, as used in Material UI.
You can manipulate/change/transform/reshape you props passed from outside.
If props to you wrapper components are passed with exactly same names as MUI is using, they will directly be sent to the inner component. (... operator.)
You can use Component with exact same name as material is using to avoid confusion.
Code is written according to advance JSX and JavaScript ES6 standards.
You have a space to manipulate your props to pass into the MUI Components.
You can also implement type checking using proptypes.
You can ask for any confusion/query.

You can write it like this:
const MyList = props => (
<List
{/*mention props values here*/}
propA={props.A}
propB={props.B}
>
{props.children}
</List>
)
const MyListItem = props => (
<ListItem
{/*mention props values here*/}
propA={props.A}
propB={props.B}
>
{props.children}
</ListItem>
)
Now you need to use MyList and MyListItem, decide the prop names for these component (as per your convenient), and inside these component map those values to actual Material-UI component properties.
Note:
If you are using the same prop names (same name as material-ui component expect) for your component then you can write like this also:
const MyList = ({children, ...rest}) => <div {...rest}>{children}</div>
const MyListItem = ({children, ...rest}) => <p {...rest}>{children}</p>
Check this example:
const A = props => <div>{props.children}</div>
const B = props => <p>{props.children}</p>
ReactDOM.render(
<A>
<A>
<B>Hello</B>
</A>
</A>,
document.getElementById('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app' />