Conditional Responsive Design with Ant Design's useBreakpoint Hook

Step 1: Install Ant Design:
Ensure you have Ant Design installed in your React project. You can install it using:

npm install antd

Step 2: Import useBreakpoint:
In your React component, import the useBreakpoint hook:

import useBreakpoint from "antd/lib/grid/hooks/useBreakpoint";

Step 3: Initialize the Hook:
Create a variable using the useBreakpoint hook in your functional component:

const screens = useBreakpoint();

Step 4: Implement Conditional Styling:
Apply conditional styling based on different screen sizes. Here, we change the background color of a button for small screens:

<Button
  style={{
    backgroundColor: screens.sm ? "red" : "white",
  }}
>
  Open
</Button>

Step 5: Device-Specific Content:
Showcase content specific to certain devices using conditional rendering. Display a message for medium and large devices:

{
  screens.md && <button>Medium device content</button>
}
{
  screens.xl && <button>Large device content</button>
}

Finnaly, You can use it for

• xs,
• sm,
• lg,
• md,
• xl ,
• xxl