|
| 1 | +import { Meta } from '@storybook/addon-docs'; |
| 2 | + |
| 3 | +<Meta |
| 4 | + title="Frameworks/React" |
| 5 | + parameters={{ |
| 6 | + viewMode: 'docs', |
| 7 | + previewTabs: { |
| 8 | + canvas: { |
| 9 | + hidden: true, |
| 10 | + }, |
| 11 | + }, |
| 12 | + }} |
| 13 | +/> |
| 14 | + |
| 15 | +# Using Baklava in React |
| 16 | + |
| 17 | +React does not [compatible](https://custom-elements-everywhere.com/#react) with most of the web component features. React passes all props as string to Custom Components so object and array props don't pass in correct way. Also, since React uses its own synthetic event system, it can't listen events that dispatches from Custom Elements. For this reasons, we used [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react) package to convert Custom Elements to React components. |
| 18 | + |
| 19 | +## Using with CDN |
| 20 | + |
| 21 | +Install the NPM package to your project. |
| 22 | + |
| 23 | +```bash |
| 24 | +npm install @trendyol/baklava |
| 25 | +``` |
| 26 | + |
| 27 | +Include Baklava library from CDN to your project's `index.html` file's `<head>` section. |
| 28 | + |
| 29 | +```html |
| 30 | +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@beta/dist/themes/default.css"/> |
| 31 | +<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@beta/dist/baklava.js"></script> |
| 32 | +``` |
| 33 | + |
| 34 | +Then you can use Baklava React components in your project by importing them from `@trendyol/baklava/dist/baklava-react` in your code. |
| 35 | + |
| 36 | +```jsx |
| 37 | +import { BlTooltip, BlButton } from "@trendyol/baklava/dist/baklava-react"; |
| 38 | + |
| 39 | +function App() { |
| 40 | + return ( |
| 41 | + <BlTooltip> |
| 42 | + <BlButton slot="tooltip-trigger" icon="info" text label="Show Info" /> |
| 43 | + Some extra information. |
| 44 | + </BlTooltip> |
| 45 | + ); |
| 46 | +} |
| 47 | + |
| 48 | +export default App; |
| 49 | +``` |
| 50 | + |
| 51 | +By using via CDN, you'll have a very thin React wrapper package in your project bundle, and you'll be able to use Baklava React components in your project with a very fast and optimized CDN. In this way you don't need to do any special thing for including assets. |
| 52 | + |
| 53 | +## Using with NPM |
| 54 | + |
| 55 | +If you want to include Baklava to your project bundle, you can import it via NPM. |
| 56 | + |
| 57 | +Install the NPM package to your project. |
| 58 | + |
| 59 | +```bash |
| 60 | +npm install @trendyol/baklava |
| 61 | +``` |
| 62 | + |
| 63 | +Then import Baklava library and styles in a central place of your app. Like `main.jsx` file. You need to use provided `setIconPath` function to set icon location via CDN. Or you can download those icons to your project's asset folder and set the path manually. |
| 64 | + |
| 65 | +```jsx |
| 66 | +import React from "react"; |
| 67 | +import ReactDOM from "react-dom/client"; |
| 68 | +import "@trendyol/baklava"; |
| 69 | +import { setIconPath } from "@trendyol/baklava"; |
| 70 | +import "@trendyol/baklava/dist/themes/default.css"; |
| 71 | +setIconPath("https://cdn.jsdelivr.net/npm/@trendyol/baklava@beta/dist/assets"); |
| 72 | + |
| 73 | +import App from "./App"; |
| 74 | + |
| 75 | +ReactDOM.createRoot(document.getElementById("root")).render( |
| 76 | + <React.StrictMode> |
| 77 | + <App /> |
| 78 | + </React.StrictMode> |
| 79 | +); |
| 80 | +``` |
| 81 | + |
| 82 | +Now you are able to use Baklava React components in your project by importing them from `@trendyol/baklava/dist/baklava-react` in your code. |
| 83 | + |
| 84 | +```jsx |
| 85 | +import { BlTooltip, BlButton } from "@trendyol/baklava/dist/baklava-react"; |
| 86 | + |
| 87 | +function App() { |
| 88 | + return ( |
| 89 | + <BlTooltip> |
| 90 | + <BlButton slot="tooltip-trigger" icon="info" text label="Show Info" /> |
| 91 | + Some extra information. |
| 92 | + </BlTooltip> |
| 93 | + ); |
| 94 | +} |
| 95 | + |
| 96 | +export default App; |
| 97 | +``` |
| 98 | + |
| 99 | +## Event Handling |
| 100 | + |
| 101 | +Baklava components emit [custom events](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). For example, the input component emits the `bl-input` event when it receives input. In React, you can listen for the event using `onInput`. |
| 102 | + |
| 103 | +Example: |
| 104 | + |
| 105 | +```jsx |
| 106 | +import { useState } from 'react'; |
| 107 | +import { BlInput } from '@trendyol/baklava/dist/baklava-react'; |
| 108 | + |
| 109 | +function MyComponent() { |
| 110 | + const [value, setValue] = useState(''); |
| 111 | + |
| 112 | + return <BlInput value={value} onInput={event => setValue(event.target.value)} />; |
| 113 | +} |
| 114 | + |
| 115 | +export default MyComponent; |
| 116 | +``` |
0 commit comments