feat(package): extends root div interface for styling

Able to specify 'style' and 'class' attribute Fix #3162 Close #3163
naver · Apr 7, 2023 · 0a1fe08 · 0a1fe08
1 parent 21eea52
commit 0a1fe08
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 15 deletions.
diff --git a/AUTHORS.txt b/AUTHORS.txt
@@ -61,3 +61,4 @@ Frank Tackitt <franklyn@tackitt.net>
 jongwooo <jongwooo.han@gmail.com>
 Jørn Andre Sundt <jorn.andre.sundt@jasmin.no>
 Erik Hopp <me@erikhopp.com>
+Do Yoon Kim <doyoonkim1002@gmail.com>
diff --git a/packages/react/README.md b/packages/react/README.md
@@ -11,7 +11,10 @@ $ npm install billboard.js @billboard.js/react
 
 ## How to use
 
+> ℹ️ The component will create a `<div>` element and append it to the parent element and [`bindto`](https://naver.github.io/billboard.js/release/latest/doc/Options.html#.bindto) option is not supported in this case.
+
 ### Basic Usage
+
 ```jsx
 import React, {useEffect, useRef} from "react";
 
@@ -45,9 +48,21 @@ function App() {
         }
     }, []);
 
-    return <div style={{width: "500px"}}>
-        <BillboardJS bb={bb} options={options} ref={chartComponent} />
-    </div>;
+    return <BillboardJS 
+        bb={bb}
+        options={options}
+        ref={chartComponent}
+
+        /* The values will be specified to the bound element as inlined styles */
+        style={{
+            width: "500px",
+            ...
+        }}
+
+        /* When class name doesn't contains `bb`,
+           then you also need to update the default CSS to be rendered correctly. */
+        className={"bb my-classname"}
+    />;
 }
 ```
 
@@ -70,6 +85,14 @@ const options = {
 
 <App {...options} />
 
+// or
+// <App data={
+//     columns: [
+//         ["data1", 300, 350, 300]
+//     ],
+//     type: "bar"
+// } />
+
 // App.tsx
 import * as Chart from "billboard.js";
 import "billboard.js/dist/billboard.css";  // default css
@@ -90,9 +113,11 @@ export function App(props: IChartOptions) {
         }
     }, []);
 
-    return <div style={{width: "500px"}}>
-        <BillboardJS bb={Chart.bb} options={props} ref={chartComponent} />
-    </div>;
+    return <BillboardJS 
+        bb={Chart.bb} 
+        options={props} 
+        ref={chartComponent}
+     />;
 }
 ```
 
@@ -103,7 +128,7 @@ export function App(props: IChartOptions) {
 interface IChartOptions;
 
 // @billboard.js/react props
-interface IProp {
+interface IProp extends Pick<HTMLProps<HTMLDivElement>, "className" | "style"> {
 	bb: typeof bb;
 	options: ChartOptions;
 }

diff --git a/packages/react/demo/App.tsx b/packages/react/demo/App.tsx
@@ -61,10 +61,13 @@ function App(props) {
 	return (
 		<div className="App" style={{width: "500px"}}>
 			<BillboardJS bb={bb} options={d} ref={chartComponent} />
-			<BillboardJS bb={bb} options={d2} />
+			<BillboardJS bb={bb} options={d2} style={{
+				width: "800px",
+				border: "solid 1px red"
+			}} />
 
 			{/* passing given props */}
-			<BillboardJS bb={bb} options={props} />
+			<BillboardJS bb={bb} options={props} className={"bb my-class"} />
 		</div>
 	);
 }

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@billboard.js/react",
-	"version": "1.0.1",
+	"version": "1.1.0",
 	"description": "React component for billboard.js",
 	"main": "dist/billboardjs-react.js",
 	"types": "dist/types/index.d.ts",

diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
@@ -2,12 +2,12 @@
  * Copyright (c) 2022 ~ present NAVER Corp.
  * @billboard.js/react project is licensed under the MIT license
  */
-import React, {forwardRef, useEffect, useImperativeHandle, useRef} from "react";
+import React, {forwardRef, HTMLProps, useEffect, useImperativeHandle, useRef} from "react";
 import type {bb, Chart, ChartOptions} from "billboard.js";
 
 export {ChartOptions as IChartOptions};
 
-export interface IProp {
+export interface IProp extends Pick<HTMLProps<HTMLDivElement>, "className" | "style"> {
 	bb: typeof bb;
 	options: ChartOptions;
 }
@@ -19,7 +19,7 @@ export interface IChart {
 export default forwardRef<IChart, IProp>((props, ref) => {
 	const container = useRef<HTMLDivElement>(null);
 	const instance = useRef<Chart | null>();
-	const {bb, options: {...options}} = props;
+	const {bb, options: {...options}, ...htmlDivProps} = props;
 
 	// generate chart
 	const generate = () => {
@@ -57,5 +57,5 @@ export default forwardRef<IChart, IProp>((props, ref) => {
 		})
 	);
 
-	return <div ref={container} />;
+	return <div ref={container} {...htmlDivProps} />;
 });
diff --git a/packages/react/test/basic.test.ts b/packages/react/test/basic.test.ts
@@ -44,7 +44,17 @@ describe("basic", async () => {
 
 		const legendText = await page.locator(".bb .bb-legend-item-data4 text");
 
-		await expect(legendText).toHaveText("data4");
+		expect(legendText).toHaveText("data4");
+
+		// check if 2nd chart has 'style' attribute
+		const style = await page.evaluate(() => document.querySelector(".bb:nth-child(2)")?.getAttribute("style"));
+
+		expect(style).not.toBeNull();
+
+		// check if 3rd chart has 'class' attribute
+		const className = await page.evaluate(() => document.querySelector(".bb:nth-child(3)")?.className);
+
+		expect(className).not.toBeNull();
 	});
 
 	test("should charts lengend be interactable.", async () => {