Skip to content
ZenAdmin Tech

Imports

Brief guide about JS imports

Imports

Importing React APIs

// ✅ Namespace import
import * as React from 'react'


// ❌ Default and named imports
import React from 'react'
import {useReducer} from 'react'


// Using React APIs
const [count, setCount] = React.useState()


React.useEffect(() => {
  // mount
  return () => {
    // unmount
  }
}, [deps])

Import order

Group your imports with the order of precedence to have a clear mental model around which files comes from where

// example import order
import * as React from 'react'
import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
import HUICard from 'hybrid-ui/components/hui-card'
import HUISpinner from 'hybrid-ui/components/hui-spinner'
import ProductList from './components/product-list'
import ProductSidebar from './components/product-sidebar'
import ProductActions from './ProductActions'
import classes from './styles.module.scss'
import {NavActions, PageActions, PageTitle} from 'hybrid-ui/layout/core'
import {QUERIES} from 'hybrid-ui/helpers'
import {useProducts, useProductTypes} from 'app/services'
import {useCountry} from 'app/utils/hooks'
import {useMediaQuery} from 'app/utils/hooks'
import {initialQueries, queryReducer, buildProductQuery} from './utils'


// Order of precedence 🔻


// absolute imports
import './styles.css'


// namespace import
import * as React from 'react'


// default imports from external libraries
import OverlayTrigger from 'react-bootstrap/OverlayTrigger'


// default imports from internal libraries/packages/directories
import HUICard from 'hybrid-ui/*'
import Example from 'app/*'
// components from the module
// local components/utils


// styles
import classes from './styles.module.scss'


// named imports
// follow the same order as default imports
import {NavActions, PageActions, PageTitle} from 'hybrid-ui/layout/core'
import {QUERIES} from 'hybrid-ui/helpers'
import {useProducts, useProductTypes} from 'app/services'
import {useCountry} from 'app/utils/hooks'
import {useMediaQuery} from 'app/utils/hooks'
import {initialQueries, queryReducer, buildProductQuery} from './utils'


// types
import type {IUser} from 'types'

:::note Import order will soon be enforced in the future via ESLint or Biome

:::

Namespace import naming

Always use capital case to distinguish external libs

// ✅
import * as Yup from 'yup'


// ❌
import * as yup from 'yup'

Exports

Exporting React components

// ✅
export default function Comp(){
  return (<div>Hii </ div>)
}


// ❌
function Comp(){
  return (<div>Hii </ div>)
}


export default Comp


// caveat: unless we are using a wrapper API e.g React.forwardRef
const AwayFilters = React.forwardRef<HTMLDivElement>((props,ref)=><>Test<>)


export default AwayFilters

Re-export defaults from components

Imports remain clean and there is a good abstraction under the same folder

// ✅
export {default} from './Component'

References