
Research
Two Malicious Rust Crates Impersonate Popular Logger to Steal Wallet Keys
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.
@dschz/solid-auto-sizer
Advanced tools
SolidJS component that automatically measures and provides the width and height of its parent — useful for virtualized lists, grids, and charts.
A SolidJS component that automatically measures and provides the width and height of its parent container, making it perfect for responsive layouts and virtualized components.
Inspired by React Virtualized Auto Sizer, this component brings the same powerful auto-sizing capabilities to SolidJS with modern improvements like ResizeObserver API and reactive signals for better performance and developer experience.
Install via your favorite package manager:
npm install solid-js @dschz/solid-auto-sizer
pnpm install solid-js @dschz/solid-auto-sizer
yarn install solid-js @dschz/solid-auto-sizer
bun install solid-js @dschz/solid-auto-sizer
This is a peer dependency, so it must be installed manually:
solid-js@>=1.6.0
import { AutoSizer } from "@dschz/solid-auto-sizer";
function MyComponent() {
return (
<div style={{ width: "100%", height: "400px" }}>
<AutoSizer>
{({ width, height }) => (
<div style={{ width: `${width}px`, height: `${height}px` }}>
Content that adapts to container size: {width} × {height}
</div>
)}
</AutoSizer>
</div>
);
}
import { AutoSizer } from "@dschz/solid-auto-sizer";
<AutoSizer>{({ width, height }) => <canvas width={width} height={height} />}</AutoSizer>;
<AutoSizer initialWidth={400} initialHeight={300}>
{({ width, height }) => <MyChart width={width} height={height} data={data} />}
</AutoSizer>
<AutoSizer
onResize={({ width, height }) => {
console.log(`Container resized to: ${width}x${height}`);
}}
>
{({ width, height }) => <VirtualizedList width={width} height={height} items={items} />}
</AutoSizer>
<AutoSizer
class="my-auto-sizer"
style={{
"background-color": "#f0f0f0",
border: "1px solid #ccc",
padding: "10px",
}}
>
{({ width, height }) => (
<div>
Styled container: {width} × {height}
</div>
)}
</AutoSizer>
Prop | Type | Default | Description |
---|---|---|---|
children | (size: Size) => JSX.Element | Required | Render prop that receives the measured dimensions |
initialWidth | number | 0 | Default width for initial render before measurement |
initialHeight | number | 0 | Default height for initial render before measurement |
onResize | (size: Size) => void | undefined | Callback fired when container size changes |
class | string | undefined | CSS class for the container element |
style | JSX.CSSProperties | undefined | Inline styles for the container (width/height are reserved) |
type Size = {
readonly width: number;
readonly height: number;
};
type AutoSizerProps = {
readonly class?: string;
readonly style?: Omit<JSX.CSSProperties, "width" | "height">;
readonly initialWidth?: number;
readonly initialHeight?: number;
readonly onResize?: (size: Size) => void;
readonly children: (size: Size) => JSX.Element;
};
Explore AutoSizer's capabilities with our comprehensive playground app! The playground includes:
# Clone the repository
git clone https://github.com/dsnchz/solid-auto-sizer.git
cd solid-auto-sizer
# Install dependencies
npm|pnpm|yarn|bun install
# Start the development server
npm|pnpm|yarn|bun start
The playground will be available at http://localhost:3000
and showcases real-world use cases including:
import { AutoSizer } from "@dschz/solid-auto-sizer";
import { LineChart } from "my-chart-library";
<div style={{ width: "100%", height: "400px" }}>
<AutoSizer>
{({ width, height }) => <LineChart width={width} height={height} data={chartData} />}
</AutoSizer>
</div>;
import { AutoSizer } from "@dschz/solid-auto-sizer";
import { VirtualList } from "my-virtualization-library";
<div style={{ width: "100%", height: "600px" }}>
<AutoSizer>
{({ width, height }) => (
<VirtualList
width={width}
height={height}
itemCount={items.length}
itemSize={50}
renderItem={({ index }) => <div>{items[index].name}</div>}
/>
)}
</AutoSizer>
</div>;
import { AutoSizer } from "@dschz/solid-auto-sizer";
<AutoSizer>
{({ width }) => {
const columns = Math.floor(width / 200); // 200px per column
return (
<div
style={{
display: "grid",
"grid-template-columns": `repeat(${columns}, 1fr)`,
gap: "16px",
}}
>
{items.map((item) => (
<GridItem key={item.id} {...item} />
))}
</div>
);
}}
</AutoSizer>;
AutoSizer uses the ResizeObserver API, which is supported in:
For older browsers, you can use a ResizeObserver polyfill.
MIT License - see LICENSE file for details.
FAQs
SolidJS component that automatically measures and provides the width and height of its parent — useful for virtualized lists, grids, and charts.
We found that @dschz/solid-auto-sizer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.
Research
A malicious package uses a QR code as steganography in an innovative technique.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.