Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@lightningjs/solid-primitives

Package Overview
Dependencies
Maintainers
7
Versions
27
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@lightningjs/solid-primitives - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

11

package.json
{
"name": "@lightningjs/solid-primitives",
"version": "0.3.0",
"version": "0.3.1",
"description": "Lightning Primitives for Solid Lightning",

@@ -20,4 +20,3 @@ "type": "module",

"dev": "concurrently -c \"auto\" \"npm:watch\" \"npm:vite\"",
"vite": "vite --open \"/test/index.html\" --host",
"prepare": "husky install"
"vite": "vite --open \"/test/index.html\" --host"
},

@@ -53,5 +52,7 @@ "keywords": [

"dependencies": {
"@lightningjs/solid": "^0.3.5",
"@solid-primitives/keyboard": "^1.2.5",
"@solid-primitives/scheduled": "^1.4.1",
"@solid-primitives/scheduled": "^1.4.1"
},
"peerDependencies": {
"@lightningjs/solid": "^0.4.0",
"solid-js": "^1.7.12"

@@ -58,0 +59,0 @@ },

@@ -9,6 +9,4 @@ <p>

## Quick Start
## To Install
Clone starter template:
```sh

@@ -18,18 +16,4 @@ > npm i @lightningjs/solid-primitives

### Row and Column
## useFocusManager
Also included is a Row and Column component which handles key navigation between children by automatically calling setFocus on selected child.
```jsx
import { Column, Row } from '@lightningjs/solid-primitives';
<Row y={400} style={styles.Row} gap={12} justifyContent="flexStart">
<Button autofocus>TV Shows</Button>
<Button>Movies</Button>
<Button>Sports</Button>
<Button>News</Button>
</Row>;
```
### useFocusManager
`useFocusManager` adds key handling, focusPath tracking, and focus and blur events on components. You can do this once in your App component. It returns a signal, focusPath which is an array of elements that currently have focus. When `activeElement` changes, the focusPath will be recalculated. During which all elements in focus will have a `focus` state added and onFocus(currentFocusedElm, prevFocusedElm) event called. Elements losing focus will have `focus` state removed and onBlur(currentFocusedElm, prevFocusedElm) called.

@@ -68,2 +52,16 @@

### Row and Column
Row and Column component handles key navigation between children by automatically calling setFocus on selected child.
```jsx
import { Column, Row } from '@lightningjs/solid-primitives';
<Row y={400} style={styles.Row} gap={12} justifyContent="flexStart">
<Button autofocus>TV Shows</Button>
<Button>Movies</Button>
<Button>Sports</Button>
<Button>News</Button>
</Row>;
```
### withPadding

@@ -74,3 +72,4 @@

```jsx
import { View, Text, withPadding } from '@lightningjs/solid';
import { Text } from '@lightningjs/solid';
import { withPadding } from '@lightningjs/solid-primitives';

@@ -77,0 +76,0 @@ const Badge = (props) => {

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc