https://github.com/arksouthern/jsx

Four core JSX tools designed for Solid JS.
https://github.com/arksouthern/jsx

component-library jsx pattern-matching solid-js

Last synced: 16 days ago
JSON representation

Four core JSX tools designed for Solid JS.

• Host: GitHub
• URL: https://github.com/arksouthern/jsx
• Owner: arksouthern
• License: mit
• Created: 2024-11-08T18:32:07.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-09T03:39:34.000Z (about 2 months ago)
• Last Synced: 2024-12-10T22:25:23.032Z (18 days ago)
• Topics: component-library, jsx, pattern-matching, solid-js
• Language: TypeScript
• Homepage:
• Size: 105 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  



Four core JSX tools designed for Solid JS

## HandleSet

```tsx

import HandleSet from "@arksouthern/jsx/hx";

```

```tsx



   {...},

    caroselBack: () => {...},

    cardHovering: () => {...},

    cardHoveringEnd: () => {...},

  }}>

    {handlers => 

      


        

          Back

        


        

        

          Next

        

      

    }

  



```


## MatchAs

```tsx

import MatchAs from "@arksouthern/jsx/mx";

```

```tsx

type FriendStatus =

  | {as: "followsYou"}

  | {as: "youFollow"}

  | {as: "mutual", daysMutual: number}

  | {as: "none"}

```

```tsx



   (

      Following you

    ),

    youFollow: () => (

      You are following

    ),

    mutual: x => (

      Mutual {x.daysMutual} for days

    ),

    none: () => <>>,

  }} />



```


## A.* Div

```tsx

import A from "@arksouthern/jsx/ax";

```

### Not Using A.* Div

```tsx



  


    


      

    

    


      


         Back 

         Next 

      

      


         Help 

      

    

  

  


    

  



```

### A.* Div Example

```tsx


  

    

      

    

    

      

         Back 

         Next 

      

      

         Help 

      

    

  

  

    

  

```

## VarSet

```tsx

import VarSet from "@arksouthern/jsx/vx";

```

```tsx



  

    {props => 

      

        

        
{props.recentPost.previewText}

      

    }

  



```