Visualwind Configuration

You must create visualwind.wrapper.tsx before using Visualwind. This file configures the isolated environment, in which your components will be rendered.

Overview

Visualwind isolates components, unaware of any global CSS or ancestor providers. To address this, it simulates your components as wrapped by <Wrapper /> from visualwind.wrapper.tsx.

For example, if <MyComponent /> is to be rendered, Visualwind renders it as follows:

import Wrapper from 'PROJECT_ROOT/visualwind.wrapper';
import MyComponent from './somewhereInTheRepo';
 
export default function App() {
  return (
    <Wrapper>
      <MyComponent />
    </Wrapper>
  );
}

You can use visualwind.wrapper.tsx to:

• Include global CSS

• Enclose with providers like <ContextProvider />, <ReactQueryProvider />

  
  
  

Common Usages

Next.js (global css file)

By Default, the golbal css lies at /app/globals.css. Therefore, you can include it in visualwind.wrapper.tsx as follows:

// visualwind.wrapper.tsx
import './app/globals.css';
 
export default function Wrapper({ children }) {
  return children; // no wrapper is set, in this case.
}

Tanstack Query (global query client provider)

To use Tanstack query, usually you wrap the whole app with <QueryClientProvider />. Since isolated components does not have access to the global providers, you can include it in visualwind.wrapper.tsx as follows:

// visualwind.wrapper.tsx
import { QueryClient, QueryClientProvider } from 'react-query';
 
const queryClient = new QueryClient();
 
export default function Wrapper({ children }) {
  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>;
  );
}

(It can be slightly different based on your project setup, and the version of tanstack query you are using.)

Redux (global store provider)

To use Redux, usually you wrap the whole app with <Provider />. Since isolated components does not have access to the global providers, you can include it in visualwind.wrapper.tsx as follows:

// visualwind.wrapper.tsx
import { Provider } from 'react-redux';
import store from '../app/store'; // your redux store
 
export default function Wrapper({ children }) {
  return (
    <Provider store={store}>
      {children}
    </Provider>;
  );
}