stormy-gold•2y ago

Swizzler generated code

There is few places such as 'Sider' generated by swizzle, where there is functions returning JSX defined inside a component (ex. here Sider Component) Is there a reason why some of these functions return JSX is defined as its considered as 'possible anti pattern', should I refactor ? I have attached an example of one of the func, This is from SIDER generated by swizzle

24 Replies

kapa.ai•2y ago

Hi @yaztoosleepy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In the extracts provided, there is an example of a custom Sider component generated by swizzle:

import { Layout, Sider } from "@refinedev/mui";  
  
const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout }) => {  
 return (  
 <>  
 <a href="https://refine.dev/">👋 Navigation Link</a>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};  
  
const CustomLayout = () => {  
 return <Layout Sider={CustomSider}>...</Layout>;  
};

import { Layout, Sider } from "@refinedev/mui";  
  
const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout }) => {  
 return (  
 <>  
 <a href="https://refine.dev/">👋 Navigation Link</a>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};  
  
const CustomLayout = () => {  
 return <Layout Sider={CustomSider}>...</Layout>;  
};

In this example, the render prop of the Sider component is used to define a function that returns JSX. This approach is not necessarily an anti-pattern, as it allows you to customize the Sider component's content while still leveraging the built-in functionality provided by refine. However, if you find that the function is becoming too complex or difficult to maintain, you can consider refactoring it into a separate component. This can help improve readability and maintainability of your code. In summary, the approach used in the example is not inherently an anti-pattern, but depending on your specific use case and code complexity, you may decide to refactor it for better code organization. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@716735177384001620> kapa.ai is still learning and improving, please let us how it did by reacting below

stormy-goldOP•2y ago

@kapa.ai how to handle custom styles when Im using nextjs with antdesign in refine template

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books:

kapa.ai•2y ago

---------------------- To handle custom styles when using Next.js with Ant Design in a refine template, you can follow these steps: 1. Create a custom .less file for your styles. For example, create a file named styles/antd.less in your project's src directory. 2. Import the Ant Design styles and add your custom styles in the antd.less file:

@import "~antd/dist/antd.less";

// Add your custom styles here

@import "~antd/dist/antd.less";

// Add your custom styles here

3. In your App.tsx file, import the custom .less file you created:

import "styles/antd.less";

import "styles/antd.less";

4. To enable dark mode, you can follow the example provided in the how-to-add-darkmode-in-ant-design (https://refine.dev/blog/how-to-add-darkmode-in-ant-design/) blog post. This example demonstrates how to use the react-css-theme-switcher package to switch between light and dark themes. Here's a summary of the changes you need to make in your App.tsx file: - Import the ThemeSwitcherProvider from the react-css-theme-switcher package. - Wrap your Refine component with the ThemeSwitcherProvider and provide the theme map with the paths to your light and dark theme CSS files. - Add a theme switcher in your Header component using the useThemeSwitcher hook. For more details and code examples, refer to the how-to-add-darkmode-in-ant-design (https://refine.dev/blog/how-to-add-darkmode-in-ant-design/) blog post. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Implementing Dark Mode In Ant Design Using gulp | refine

In this article, we’ll learn how to efficiently implement dark mode in a refine/Ant Design app, using gulp library and leveraging some React features like hooks

kapa.ai•2y ago

<@716735177384001620> kapa.ai is still learning and improving, please let us how it did by reacting below

passive-yellow•2y ago

Hey @yaztoosleepy Is it an anti-pattern to create the logout button like this?

stormy-goldOP•2y ago

Hi @yildirayunlu

passive-yellow•2y ago

https://refine.dev/docs/api-reference/antd/theming/#theme-customization

stormy-goldOP•2y ago

I was asking basically I'm writing a admin template using refine and its on its initial phase I see a lot of function spitting out jsx elements inside components itself Not easy to read honestly but was worried if it was anti-pattern And when I checked few posts and forum they say its good to stay away from it/ refactor to a component itself So I came here for second opinion what is your take on this @yildirayunlu ? Thanks for the tip! I'm weighing out options between css modules/scss/styled components/ tailwind I dont know which to choose to go with nextjs & antd @kapa.ai

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books:

passive-yellow•2y ago

@yaztoosleepy Thank you for your feedback. We've never met before and if you want to help us fix this, we'll wait for your PR. 🙏🏼

kapa.ai•2y ago

---------------------- When choosing a styling solution for your Next.js and Ant Design project, it's essential to consider your preferences, project requirements, and team familiarity with the technologies. Here's a brief overview of the options you mentioned: 1. CSS Modules: A CSS Modules approach allows you to write modular CSS with locally scoped class names. It's a good choice if you prefer writing plain CSS and want to avoid global styles. Next.js has built-in support for CSS Modules. 2. SCSS: SCSS (Sass) is a CSS preprocessor that adds features like variables, nesting, and mixins. If you prefer a more structured and feature-rich way of writing CSS, SCSS might be a good choice. You can use SCSS with Next.js by following the official guide (https://nextjs.org/docs/basic-features/built-in-css-support#sass-support). 3. Styled Components: Styled Components is a popular CSS-in-JS library that allows you to write CSS directly in your JavaScript components. It's a good choice if you prefer a component-based approach to styling and want to leverage the full power of JavaScript in your styles. You can use Styled Components with Next.js by following the official example (https://github.com/vercel/next.js/tree/canary/examples/with-styled-components). 4. Tailwind CSS: Tailwind CSS is a utility-first CSS framework that allows you to build custom designs quickly by composing utility classes. It's a good choice if you prefer a fast and consistent way of building UIs without writing custom CSS. You can use Tailwind CSS with Next.js by following the official guide (https://tailwindcss.com/docs/guides/nextjs).

Basic Features: Built-in CSS Support | Next.js

Next.js supports including CSS files as Global CSS or CSS Modules, using styled-jsx for CSS-in-JS, or any other CSS-in-JS solution! Learn more here.

kapa.ai•2y ago

When using Ant Design, you can still customize the styles using any of the above methods. However, keep in mind that Ant Design uses Less as its styling language. If you need to customize Ant Design components extensively, you might want to consider using Less or a compatible solution. Ultimately, the choice depends on your preferences and project requirements. You can try out each option in a small project to see which one works best for you and your team. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@716735177384001620> kapa.ai is still learning and improving, please let us how it did by reacting below

stormy-goldOP•2y ago

Oh please I'm no expert by any means I came here for answers actually haha I strongly recommend you to take a look at code generated by swizzler cli https://dev.to/igor_bykov/react-calling-functional-components-as-functions-1d3l#:~:text=gets%20re%2Dmounted.-,Conclusion,and%20can%20have%20a%20state. This is the blog post I referenced for my concerns Take a look and let me know if you share the same concern And I will be happy to fix and make a PR @yildirayunlu

DEV Community

React: Calling functional components as functions

TL;DR To be a component ≠ Return JSX <Component /> ≠ Component() Note: This article tries t...

stormy-goldOP•2y ago

@kapa.ai how do you propose I use less ?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To use Less with Next.js and Ant Design, you can follow these steps: 1. Install the required dependencies:

npm install less less-loader

npm install less less-loader

2. Create a custom .less file for your styles. For example, create a file named styles/antd.less in your project's src directory. 3. Import the Ant Design styles and add your custom styles in the antd.less file:

@import "~antd/dist/antd.less";

// Add your custom styles here

@import "~antd/dist/antd.less";

// Add your custom styles here

4. In your App.tsx file, import the custom .less file you created:

import "styles/antd.less";

import "styles/antd.less";

5. Configure Next.js to use the Less loader. Create a next.config.js file in your project's root directory and add the following configuration:

const withLess = require('@zeit/next-less');

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
  },
});

const withLess = require('@zeit/next-less');

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
  },
});

Now, you can use Less for styling your Next.js and Ant Design project. You can customize Ant Design components and write your custom styles using Less. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@716735177384001620> kapa.ai is still learning and improving, please let us how it did by reacting below

stormy-goldOP•2y ago

@kapa.ai How do I write custom component styles using less in the smae

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To write custom component styles using Less in your Next.js and Ant Design project, follow these steps: 1. Create a new .less file for your custom component. For example, if you have a MyComponent.tsx file, create a corresponding MyComponent.less file in the same directory. 2. Write your custom styles in the MyComponent.less file. For example:

.my-component {
  background-color: #f0f0f0;
  padding: 16px;
  border-radius: 4px;
}

.my-component-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.my-component {
  background-color: #f0f0f0;
  padding: 16px;
  border-radius: 4px;
}

.my-component-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

3. In your MyComponent.tsx file, import the custom .less file you created:

import React from 'react';
import './MyComponent.less';

const MyComponent = () => {
  return (
    <div className="my-component">
      <h2 className="my-component-title">My Custom Component</h2>
      <p>This is a custom component with Less styles.</p>
    </div>
  );
};

export default MyComponent;

import React from 'react';
import './MyComponent.less';

const MyComponent = () => {
  return (
    <div className="my-component">
      <h2 className="my-component-title">My Custom Component</h2>
      <p>This is a custom component with Less styles.</p>
    </div>
  );
};

export default MyComponent;

Now, your custom component will have the styles defined in the MyComponent.less file. This approach allows you to keep your component styles modular and organized. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@716735177384001620> kapa.ai is still learning and improving, please let us how it did by reacting below

stormy-goldOP•2y ago

@kapa.ai so how do I handle golbal ant.less and less files defined in the component

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: @yaztoosleepy That's a great question, but unfortunately I am only capable of responding to a maximum of three questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!

Swizzler generated code

Did you find this page helpful?