Skip to content

Commit b6ecc39

Browse files
nasdannasdan
committed
add basic example with css modules
1 parent 9a23e0c commit b6ecc39

28 files changed

+15904
-3413
lines changed

‎examples/basic/README.md

Whitespace-only changes.

‎examples/basic/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>React App</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/index.tsx"></script>
12+
</body>
13+
</html>

‎examples/basic/package.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "examples-basic",
3+
"scripts": {
4+
"start": "vite --open"
5+
},
6+
"repository": {
7+
"type": "git",
8+
"url": "git+https://github.com/Lemoncode/react-image-focal-point.git"
9+
},
10+
"author": "Lemoncode",
11+
"homepage": "https://github.com/Lemoncode/react-image-focal-point/tree/main/examples#readme",
12+
"devDependencies": {
13+
"@lemoncode/tsconfig": "^0.0.0",
14+
"@types/react": "^18.0.27",
15+
"@types/react-dom": "^18.0.10",
16+
"@vitejs/plugin-react": "^3.1.0",
17+
"typescript": "^4.9.5",
18+
"vite": "^4.1.1"
19+
},
20+
"dependencies": {
21+
"@lemoncode/react-image-focal-point": "^0.0.0",
22+
"react": "^18.2.0",
23+
"react-dom": "^18.2.0"
24+
}
25+
}

‎examples/basic/src/app.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import '@lemoncode/react-image-focal-point/style.css';
2+
import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
3+
4+
export const App = () => {
5+
return (
6+
<ImageFocalPoint
7+
src="https://images.unsplash.com/photo-1495446815901-a7297e633e8d"
8+
onChange={(x, y) => {
9+
console.log({ x, y });
10+
}}
11+
/>
12+
);
13+
};

‎examples/basic/src/index.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createRoot } from 'react-dom/client';
2+
import { App } from './app';
3+
4+
const root = createRoot(document.getElementById('root')!);
5+
6+
root.render(<App />);

‎examples/basic/tsconfig.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"extends": "@lemoncode/tsconfig/react.json",
3+
"include": ["src", "./vite-env.d.ts"],
4+
"exclude": ["node_modules"]
5+
}

‎examples/basic/vite-env.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/// <reference types="vite/client" />
2+
3+
// Reference: https://github.com/vitejs/vite/discussions/6799

‎examples/basic/vite.config.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { defineConfig } from 'vite';
2+
import react from '@vitejs/plugin-react';
3+
4+
export default defineConfig({
5+
plugins: [react()],
6+
css: {
7+
modules: {
8+
localsConvention: 'camelCase',
9+
},
10+
},
11+
});

0 commit comments

Comments
 (0)