https://github.com/uhyo/react-wc

https://github.com/uhyo/react-wc

Last synced: 16 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/uhyo/react-wc
• Owner: uhyo
• License: mit
• Created: 2020-10-03T05:54:53.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2020-11-01T06:33:17.000Z (about 4 years ago)
• Last Synced: 2024-10-12T17:38:01.719Z (about 1 month ago)
• Language: TypeScript
• Size: 591 KB
• Stars: 57
• Watchers: 6
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-wc

> Tiny wrapper of Web Components for react.

## What `react-wc` does?

It creates a React component which renders a custom element with given HTML fragment in its Shadow DOM.

## Looking for a WebComponents-based CSS-in-JS solution for React?

This package provides some low-level functionality that helps other Web Components-based libraries.

If you are not a package author, you may be interested in [Castella](https://github.com/uhyo/castella), a CSS-in-JS library for React backed by this package.

## Usage

### Defining a Component

```ts

import { wc } from "react-wc";

export const Counters = wc({

  shadowHtml: `

    

      div {

        display: grid;

        grid: auto-flow / repeat(16, 80px);

        gap: 10px;

      }

    

    


  `,

  name: "my-counter-element"

});

```


### Using Defined Component

```tsx

child

```

### Rendered DOM

```html

  #shadow-root

    

      div {

        display: grid;

        grid: auto-flow / repeat(16, 80px);

        gap: 10px;

      }

    

    


  child


```

### Named Slots

```ts

const AppStyle = wc({

  shadowHtml: `

    

      header {

        border: 1px solid #cccccc;

        padding: 4px;

      }

      p {

        border-bottom: 1px dashed #999999;

      }

    

    

    
Counter value is 

    

  `,

  slots: ["header", "counter"],

  element: "my-app-style"

});


const CounterValue = ({ children }) => {children};

```

Named slots can be filled by a prop with the same name. Any React nodes can be passed to those props. 

```tsx

       setCounter((c) => c + 1)}>+1

    

  }

  counter={{counter}}

>

  

    {[...range(0, 256)].map((i) => (

      {counter}

    ))}

  

```

#### Rendered DOM

Rendered DOM elements are automatically given the `slot` attribute so they fill corresponding ``s. `react-wc` does all the work needed to achieve this.

```html

  #shadow-dom ...

  


    +1

  

  1

  ...


```

## Further Reading

- [Blog article (日本語)](https://blog.uhy.ooo/entry/2020-10-03/react-wc/)

## Future Roadmap

- [ ] SSR Support?

## Contributing

Welcome

## License

MIT