Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(widgets) Custom Widget Developer Guide #9304

Open
wants to merge 24 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
101aaf9
docs(widgets) Widget Developer Guide
chrisgervang Dec 18, 2024
ebd2b50
Update docs/developer-guide/custom-widgets/README.md
chrisgervang Dec 18, 2024
70248ce
Update docs/developer-guide/custom-widgets/universal-widgets.md
chrisgervang Dec 18, 2024
026fd27
Update docs/developer-guide/custom-widgets/README.md
chrisgervang Dec 18, 2024
41cdfb3
adding preact page and vanilla example
chrisgervang Dec 18, 2024
077ddd9
onViewportChange
chrisgervang Dec 18, 2024
775c7b8
misc react docs
chrisgervang Dec 18, 2024
e68bd41
Styling Your React Widget
chrisgervang Dec 18, 2024
5291a26
TOC
chrisgervang Dec 18, 2024
dcb07be
type cleanup
chrisgervang Dec 18, 2024
8daa0c6
Merge branch 'master' into chr/widget-dev-guide
chrisgervang Dec 18, 2024
e48c1c9
Adding required class members
chrisgervang Dec 19, 2024
98a82a4
Add reactivity to examples
chrisgervang Dec 21, 2024
5366ae2
[docs] rewrite React widget dev guide
chrisgervang Jan 2, 2025
f17de11
Merge branch 'master' into chr/widget-dev-guide
chrisgervang Jan 4, 2025
a45ba17
use type instead of interface
chrisgervang Jan 5, 2025
225cd33
Update preact-widgets.md
chrisgervang Jan 6, 2025
2548071
Fix example in preact-widgets.md
chrisgervang Jan 7, 2025
9a1ffe5
Merge branch 'master' into chr/widget-dev-guide
chrisgervang Jan 7, 2025
90e62a8
After testing react-widgets.md
chrisgervang Jan 8, 2025
afba3b8
Update react-widgets.md
chrisgervang Jan 8, 2025
5152e49
Use a portal instead of a ref
chrisgervang Jan 8, 2025
1392345
Update preact-widgets.md
chrisgervang Jan 10, 2025
06ef666
Update README.md
chrisgervang Jan 16, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Styling Your React Widget
  • Loading branch information
chrisgervang committed Dec 18, 2024
commit e68bd41781ef5a0736a4f7d57fbb9ef1770f40dc
63 changes: 53 additions & 10 deletions docs/developer-guide/custom-widgets/react-widgets.md
Original file line number Diff line number Diff line change
@@ -90,11 +90,7 @@ export const RotateReactWidget = (props: RotateWidgetProps) => {
const widget = useWidget(RotateWidget, { ref, ...props });

return (
<div
ref={ref}
style={{ padding: '10px', backgroundColor: '#f0f0f0', ...props.style }}
className='custom-rotate-widget'
>
<div ref={ref} style={{ padding: '10px', backgroundColor: '#f0f0f0' }}>
<button onClick={() => widget.handleCCWRotate()} style={{ marginRight: '5px' }}>
Rotate CCW
</button>
@@ -108,24 +104,71 @@ export const RotateReactWidget = (props: RotateWidgetProps) => {

This widget controls the bearing of the view its attached to.

### Styling Your React Widget
#### Styling Your React Widget

#### Inline Styles
##### Adding Inline Styles

React widgets can be written to accept `style` props for inline styling.
Add the `style` prop in your React component for inline styling overrides.

```tsx
export const RotateReactWidget = (props: RotateWidgetProps) => {
...
return <div style={{...props.style}}>...</div>
}
```

```tsx
<RotateReactWidget style={{ backgroundColor: 'blue', color: 'white' }} />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

THis is only true if the widget actually forwards those props as in the example?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

True. I've broken this out into it's own step-by-step section

```

#### CSS Classes
##### Adding CSS Classes

Add `className` to your React component and styles to your stylesheet.

```tsx
import 'style.css';

React widgets can use `className` and add styles to their stylesheet.
export const RotateReactWidget = (props: RotateWidgetProps) => {
...
return <div className="custom-rotate-widget">...</div>
}
```

```css
/* style.css */
.custom-rotate-widget {
padding: 10px;
background-color: #333;
color: white;
}
```

##### Applying the deck.gl widget design system
Copy link
Collaborator Author

@chrisgervang chrisgervang Dec 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should applying the design system be it's own page?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1, the styling system is an important (top-level) part of your design!


Reuse the built-in deck.gl widget [stylesheet](https://unpkg.com/deck.gl@latest/dist/stylesheet.css) by importing them into your application. This can be useful if you're already theming deck.gl widgets and want to reuse CSS styles and variables. See [Widget Overview](../../api-reference/widgets/overview.md#custom-class-theming) for a full list of built-in variables.

```tsx
import '@deck.gl/widgets/stylesheet.css';
import 'style.css';

export const RotateReactWidget = (props: RotateWidgetProps) => {
const ref = useRef();
const widget = useWidget(RotateWidget, { ref, ...props });
return (
<div ref={ref} className="deck-widget">
<div className="deck-widget-button">
<button className="deck-widget-icon-button">
...
</button>
</div>
</div>
)
}
```

```css
/* style.css */
.deck-widget {
--button-corner-radius: 4px;
}
```
Loading