gsimone/cra-template-cracodile

🐊 A create-react-app template with tailwind and nice-to-haves

A custom create-react-app template

Install

npx create-react-app --template cracodile my-app

What's included

• tailwindcss
• craco
  • postcss-import
  • autoprefixer
  • css-nano
  • tailwind
• Inter variable webfont
• prettier + pretty-quick at pre-commit via husky
• .editorconfig
• npm-check-updates via script yarn ncu

Adding the 3D package

To add the usual 3D package:

yarn add threejs react-three-fiber drei react-spring@next

• three.js
• react-three-fiber
• react-spring
• drei

Here's a quick scene to copy-paste:

import React, { Suspense } from "react";
import { Canvas } from "react-three-fiber";
import { OrbitControls, StandardEffects, Box } from "drei";

function App() {
  return (
    <Canvas
      shadowMap
      colorManagement
      camera={{ position: [-4, 4, -4], far: 50 }}
      style={{
        background: "#121212",
      }}
    >
      <ambientLight />
      <spotLight
        intensity={2}
        position={[20, 20, 20]}
        shadow-bias={-0.00005}
        angle={Math.PI / 6}
        shadow-mapSize-width={2048}
        shadow-mapSize-height={2048}
        castShadow
      />
      <Box />
      <Suspense fallback={null}>
        <StandardEffects smaa bloom={{ luminanceThreshold: 0.99 }} />
      </Suspense>
      <OrbitControls />
    </Canvas>
  );
}

export default App;