diff --git a/README.md b/README.md index 40f890b938..0a00d442ce 100644 --- a/README.md +++ b/README.md @@ -154,10 +154,11 @@ train_evaluation.r2_score_linear_regression: ### Standalone React component usage -To use Kedro-Viz as a standalone React component, import the component and supply a data JSON as prop: +To use Kedro-Viz as a standalone React component, you can follow the example below. However, please note that Kedro-Viz does not support server-side rendering (SSR). If you're using Next.js or another SSR framework, you should be aware of this limitation. ```javascript import KedroViz from '@quantumblack/kedro-viz'; +import '@quantumblack/kedro-viz/lib/styles.min.css'; const MyApp = () => (
@@ -166,6 +167,23 @@ const MyApp = () => ( ); ``` +To use with NextJS: + +```javascript +import '@quantumblack/kedro-viz/lib/styles.min.css'; +import dynamic from 'next/dynamic'; + +const NoSSRKedro = dynamic(() => import('@quantumblack/kedro-viz'), { + ssr: false, +}); + +const MyApp = () => ( +
+ +
+); +``` + The JSON can be obtained by running: ```bash diff --git a/RELEASE.md b/RELEASE.md index 7aad591a83..286ef26ea5 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -10,7 +10,7 @@ Please follow the established format: ## Bug fixes and other changes -- Resolved various bugs affecting server-side rendering, updated dependencies to ensure compatibility with Vite and Next.js environments (#1508) +- Updated dependencies to ensure compatibility with Vite and Next.js environments, combine css into a signle file for npm library (#1510) # Release 6.5.0 @@ -25,7 +25,6 @@ Please follow the established format: - Remove python upper-bound requirements and add KedroVizPythonVersion warning. (#1506) - Resolved various bugs affecting server-side rendering, updated dependencies to ensure compatibility with Vite and Next.js environments (#1508) - # Release 6.4.0 ## Major features and improvements diff --git a/package.json b/package.json index 216a716111..c6783f6313 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@quantumblack/kedro-viz", - "version": "6.5.1", + "version": "6.5.0", "description": "Kedro-Viz is an interactive development tool for building data science pipelines with Kedro.", "main": "lib/components/app/index.js", "files": [ @@ -21,7 +21,7 @@ "lib": "npm-run-all -s lib:clean lib:copy lib:css lib:webpack lib:babel lib:prune", "lib:clean": "rm -rf lib", "lib:copy": "cp -rf src lib", - "lib:css": "sass --no-source-map lib/. && cleancss -o lib/styles/styles.min.css lib/**/*.css", + "lib:css": "sass --no-source-map lib/. && cleancss -o lib/styles.min.css lib/**/*.css", "lib:webpack": "webpack --config webpack.lib.js", "lib:babel": "babel lib --out-dir lib", "lib:prune": "find lib -type f -name '*.test.*' -delete && find lib -type f -name '*.scss' -delete && find lib/components -type f -name '*.css' -delete",