(Jump to Code | Demo) First of all, we should know what is React wrapper component? Well, its similar to any ordinary component but we define them for special tasks that needs to be done on child components.
In this article we will create Permission wrapper component which will decide if child component should be rendered or not depending on permission. I chose this example because this way you will also get the idea of how permission based modular components should be designed.
Code example of react wrapper component
In this example, we will create 4 components –
-
Permission– It is the wrapper which decides if child component should render or not. -
Customers– This component shows the lists of customers. It is one of the child of our wrapper. So, it will be rendered only when user has permission to access it. -
Orders– A component to show orders list. It includes item name, customer name and amount. Again we will display it only if permitted. -
App– Home page component.
You may also like –
First, let’s see the format of wrapper components –
<WrapperComponent> <AnyNormalComponent></AnyNormalComponent> </WrapperComponent>
In our example, <WrapperComponent> = <Permission> and <AnyNormalComponent> = <Customers> or <Orders>.
Code for permission component –
const Permission = (props) => {
return props.checkPermission ? (
props.children
) : (
<p>You don't have permission</p>
);
};
This permission component (wrapper component) will check if checkPermission prop is true or false and accordingly publishes child component or error message.
Customers Component Code –
const Customers = (props) => {
const customersList = [
"John Wick",
"Robert Downey Jr.",
"Chandler Bing",
"Sheldon Cooper",
"Georgie",
"Veronica",
"Joey Tribianni",
"Ross Gellar",
"Gilfoy",
"Red",
"Gollum"
];
return customersList.map((item, index) => {
return <p key={index}>{item}</p>;
});
};
This component is printing the list of names.
Orders Component Code
const Orders = (props) => {
const ordersList = [
{ item: "Gun", customer: "John Wick", amount: 50000 },
{
item: "Another Marvel Movie",
customer: "Robert Downey Jr.",
amount: 100000000
},
{ item: "Joke's Book", customer: "Chandler Bing", amount: 10 },
{ item: "Train Toy", customer: "Sheldon Cooper", amount: 75 },
{ item: "Tyres", customer: "Georgie", amount: 200 },
{ item: "Bible", customer: "Veronica", amount: 25 },
{ item: "Double Pizza", customer: "Joey Tribianni", amount: 5 },
{ item: "Dinosaur Toy", customer: "Ross Gellar", amount: 30 },
{ item: "Anton", customer: "Gilfoy", amount: 1500 },
{ item: "Anger Management Class", customer: "Red", amount: 120 },
{ item: "Precious Ring", customer: "Gollum", amount: 0 }
];
return (
<table border={1} style={{ borderCollapse: "collapse" }}>
<thead>
<tr>
<th>Customer</th>
<th>Item</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
{ordersList.map((element, index) => {
return (
<tr key={index}>
<td>{element.customer}</td>
<td>{element.item}</td>
<td>{element.amount}</td>
</tr>
);
})}
</tbody>
</table>
);
};
Orders component is displaying a table of item name, customer name and total amount.
Now wrapper can wrap these two components (Customers and Orders) like this –
<Permission checkPermission={true}>
<Customers />
</Permission>
<Permission checkPermission={false}>
<Orders />
</Permission>
Complete Code –
import React from "react";
const Permission = (props) => {
return props.checkPermission ? (
props.children
) : (
<p>You don't have permission</p>
);
};
const Customers = (props) => {
const customersList = [
"John Wick",
"Robert Downey Jr.",
"Chandler Bing",
"Sheldon Cooper",
"Georgie",
"Veronica",
"Joey Tribianni",
"Ross Gellar",
"Gilfoy",
"Red",
"Gollum"
];
return customersList.map((item, index) => {
return <p key={index}>{item}</p>;
});
};
const Orders = (props) => {
const ordersList = [
{ item: "Gun", customer: "John Wick", amount: 50000 },
{
item: "Another Marvel Movie",
customer: "Robert Downey Jr.",
amount: 100000000
},
{ item: "Joke's Book", customer: "Chandler Bing", amount: 10 },
{ item: "Train Toy", customer: "Sheldon Cooper", amount: 75 },
{ item: "Tyres", customer: "Georgie", amount: 200 },
{ item: "Bible", customer: "Veronica", amount: 25 },
{ item: "Double Pizza", customer: "Joey Tribianni", amount: 5 },
{ item: "Dinosaur Toy", customer: "Ross Gellar", amount: 30 },
{ item: "Anton", customer: "Gilfoy", amount: 1500 },
{ item: "Anger Management Class", customer: "Red", amount: 120 },
{ item: "Precious Ring", customer: "Gollum", amount: 0 }
];
return (
<table border={1} style={{ borderCollapse: "collapse" }}>
<thead>
<tr>
<th>Customer</th>
<th>Item</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
{ordersList.map((element, index) => {
return (
<tr key={index}>
<td>{element.customer}</td>
<td>{element.item}</td>
<td>{element.amount}</td>
</tr>
);
})}
</tbody>
</table>
);
};
export default function App() {
const [permissions, setPermissions] = React.useState({ a: 0, b: 0 });
return (
<div>
<p>
Select Permission: <br />
<input
type={"checkbox"}
onChange={(e) =>
setPermissions({ a: e.target.checked, b: permissions.b })
}
/>{" "}
Can see customers list
<br />
<input
type={"checkbox"}
onChange={(e) =>
setPermissions({ b: e.target.checked, a: permissions.a })
}
/>{" "}
Can see orders list
</p>
<hr />
<div style={{ display: "flex" }}>
<div style={{ padding: 10 }}>
<h4>Customers</h4>
<Permission checkPermission={permissions.a}>
<Customers />
</Permission>
</div>
<div style={{ padding: 10 }}>
<h4>Orders</h4>
<Permission checkPermission={permissions.b}>
<Orders />
</Permission>
</div>
</div>
</div>
);
}
You can use this method in variety of projects where different functionality needs to be shown to different users. For example, your users have access levels like – Super Admin, Admin, Editor, Collaborator, Subscriber, etc. Now we should not allow a subscriber to add a post. Similarly, an editor should not get option to change the theme of website.
This Permission component will only show those options which a user is permitted to access.
Similar Topic-
Live Demo
In this article we learned how we can create a react wrapper component and their use cases. See you in next article.
Read Further –
