open-index/open-npm huggingface dataset:
npm package: @ferdipret/svg-2-img
Description: <h1 align="center">   <img src="https://raw.githubusercontent.com/ferdipret/svg2Image/main/resources/svg2image-logo.png" alt="svg2Image" title="svg2Image" width="300"> </h1> <p align="center" style="font-size: 1.2rem;">The easiest way to download an SVG a
Author: Ferdi Pretorius
Latest version: 1.0.3

<h1 align="center">
  <img src="https://raw.githubusercontent.com/ferdipret/svg2Image/main/resources/svg2image-logo.png" alt="svg2Image" title="svg2Image" width="300">
</h1>
<p align="center" style="font-size: 1.2rem;">The easiest way to download an SVG as an image.</p>

## Install

```sh
npm install @ferdipret/svg-2-img

# or

yarn add @ferdipret/svg-2-img
```

## Examples

#### Vanilla JS Image Download

```js
import svg2Img from '@ferdipret/svg-2-img'
const svgElement = document.querySelector('#myLogo')
const downloadButton = document.querySelector('#downloadButton')

downloadButton.addEventListener('click', () => {
  svg2Img(svgElement, {
    format: 'jpeg',
    downloadFileName: 'cool-logo',
  })
})

```

#### React + TypeScript Image Download
```tsx
import React from 'react'
import svg2Image from '@ferdipret/svg-2-img'


function Component() {
  const logoRef = useRef<SVGSVGElement>(null)

  const handleClick = () => {
    const svg = logoRef.current

    svg2Img(svg, {
      width: 300,
      height: 300,
      backgroundColor: 'red',
    })
  }

  return (
    <>
      <Logo ref={logoRef} />
      <button onClick={handleClick}>Download image</button>
    </>
  )
}

export default Component
```
npm package: @ferdiunal/refinedev-shadcn-ui
Description: theme for refine.dev with shadcn-ui
Author: Ferdi UNAL
Latest version: 1.0.7
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# refindev-shadcn-ui

This package is a theme integration for [refine.dev](https://refine.dev) built using [ui.shadcn](ui.shadcn.com).

## [Documentation](../../wiki)

# Sponsors

[<img src="https://avatars.githubusercontent.com/u/104967037?s=200&v=4" width="100">](https://github.com/refinedev)

## License

The MIT License (MIT). Please see [License File](LICENSE) for more information.
npm package: @ferdotnet/reactive-form-builder
Description: for React
Author: Fernando Munoz
Latest version: 4.0.1

# Reactive Form Builder

for React

Documentation here:
https://reactiveformbuilder.com

**./schema.ts**

```
import joi from 'joi';
// import { Input, Select, Textarea, CheckList, RadioList } from '@ferdotnet/reactive-form-builder';
// or, import here your custom inputs if needed

const schema = {
  yearOfBirth: {
    value: '',
    label: 'Year of birth',
    input: Input,
    type: 'number',
    joi: joi
      .number()
      .integer()
      .min(currentYear - maxAge)
      .max(currentYear)
      .required()
      .messages({
        'number.min': 'You can not be older than 100 yo and be coding!',
        'number.max': 'You can not have born in the future, yet!'
      })
  },
  yearOfGraduation: {
    value: '',
    label: 'Year of Graduation',
    input: Input,
    type: 'number',
    joi: joi
      .number()
      .integer()
      .min(
        joi.ref('yearOfBirth', {
          adjust: value => value + minAgeToGetGraduated
        })
      )
      .max(
        joi.ref('yearOfBirth', {
          adjust: value => value + maxAge
        })
      )
      .required()
      .messages({
        'number.min': 'Mmh! You can only be graduated after 18 since you have born!',
        'number.max': 'For the moment, a person can not get graduated 100 years after have born!'
      })
  }
}

export default schema;
```

**./yourComponent.tsx**

```
import React from 'react';
import { useReactiveFormBuilder, ReactiveFormBuilder } from '@ferdotnet/reactive-form-builder';
import schema from './schema';

const MyComponent = () => {
  const handler = useReactiveFormBuilder(schema, true); // Second param is to debug
  
  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    alert(JSON.stringify(handler.data));
  };

  const handleFill = () => {
    handler.setFullForm({
      yearOfBirth: 1991,
      yearOfGraduation: 2012
    });
  };

  const handleReset = () => {
    handler.resetForm();
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <ReactiveFormBuilder handler={handler} />

      <button type="submit" disabled={!handler.valid}>
        Submit
      </button>

      <button type="button" disabled={handler.valid} onClick={handleFill}>
        Fill form
      </button>

      <button type="button" onClick={handleReset}>
        Reset
      </button>
    </form>
  );
};

export default MyComponent;
```
npm package: @ferdotnet/use-forwarded-ref
Description: ### Demo (Codepen)
Author: Fernando Munoz
Latest version: 0.0.3

## A custom hook for react: useForwardedRef

### Demo (Codepen)

https://codepen.io/ferdotnet/pen/gOKKxNr

### Install

```yarn add @ferdotnet/use-forwarded-ref```

### How to use it?

```
const Button = forwardRef(({ text }, ref) => {
  const safeRef = useForwardedRef(ref);
  useRipple(safeRef);
  
  return (
    <button className="button" ref={safeRef as React.RefObject<HTMLButtonElement>}>
      {text}
    </button>
  );
});
```
npm package: @ferdotnet/use-ripple
Description: ### Demo (Codepen)
Author: Fernando Munoz
Latest version: 0.0.4

## A custom hook for react: useRipple

### Demo (Codepen)

https://codepen.io/ferdotnet/pen/gOKKxNr

### Install

```yarn add @ferdotnet/use-ripple```

### How to use it?

```
import React from 'react';
import useRipple from '@ferdotnet/use-ripple';

export default () => {
    const ref = useRef(null);
    useRipple(ref);

    return <button ref={ref}>Click me</button>;
};
```

#### Also import the styles:

```@import '~@ferdotnet/use-ripple/styles';``` 

or check the codepen link for custom styles.
npm package: @ferdotnet/use-window-size
Description: ### Demo (Codepen)
Author: Fernando Munoz
Latest version: 0.0.6

## A custom hook for react: useWindowSize

### Demo (Codepen)

https://codepen.io/ferdotnet/pen/gOKKRJE

### Install

```yarn add @ferdotnet/use-window-size```

### How to use it?

```
import React from 'react';
import useWindowSize from '@ferdotnet/use-window-size';

export default () => {
    const { width, height } = useWindowSize(); 

    return <div>width: {width} height: {height}</div>;
};
```