# create-prek-el-widgets

> Create Elementor widgets with React using a single command

Latest version **1.0.1** (published 2024-05-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install create-prek-el-widgets
pnpm add create-prek-el-widgets
yarn add create-prek-el-widgets
bun add create-prek-el-widgets
```

Provides the command `create-prek-el-widgets`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2024-05-14 |
| First published | 2024-05-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=18.17.0 |
| Dependencies | 0 |
| Unpacked size | 539.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Chris Magnussen |
| Maintainers | chrisrm |
| Keywords | prek, elementor, react |

## Links

- npm: https://www.npmjs.com/package/create-prek-el-widgets
- npm.io page: https://npm.io/package/create-prek-el-widgets

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2024-05-14

## README

# Create Elementor Widgets with React

The easiest way to create Elementor widgets with React. This CLI tool will help you create a new project with all the necessary configurations to start developing Elementor widgets with React.

## Interactive

You can create a new project interactively by running:

```bash
npx create-prek-el-widgets@latest
# or
pnpm create prek-el-widgets
# or
yarn create prek-el-widgets
# or
bunx create-prek-el-widgets
```

You will be asked for the name of your project, and then whether you want to create a TypeScript project:

```bash
✔ Would you like to use TypeScript? … No / Yes
```

Select Yes to install the necessary types/dependencies and create a new TS project.

## Non-interactive

You can also pass command line arguments to set up a new project non-interactively. See create-prek-el-widgets --help:

```bash
Usage: create-prek-el-widgets <project-directory> [options]

Options:
  -V, --version                        output the version number
  --ts, --typescript

    Initialize as a TypeScript project. (default)

  --tailwind

    Initialize with Tailwind CSS config. (default)

  --eslint

    Initialize with eslint config.

  --import-alias <alias-to-configure>

    Specify import alias to use (default "@/*").

  --use-npm

    Explicitly tell the CLI to bootstrap the application using npm

  --use-pnpm

    Explicitly tell the CLI to bootstrap the application using pnpm

  --use-yarn

    Explicitly tell the CLI to bootstrap the application using Yarn

  --use-bun

    Explicitly tell the CLI to bootstrap the application using Bun

  --reset-preferences

    Explicitly tell the CLI to reset any stored preferences

  --skip-install

    Explicitly tell the CLI to skip installing packages
```

For example, to create a new project with TypeScript and Tailwind CSS:

```bash
npx create-prek-el-widgets@latest my-new-project --ts --tailwind
```

## Configuration

The CLI tool will create a new project with the following structure:

```bash
my-new-project
├── .gitignore
├── package.json
├── README.md
├── src
│   ├── App.tsx
│   ├── index.tsx
│   ├── plugin.ts
└── tsconfig.json
```

When adding or updating widgets, update the following file:

- `src/plugin.ts`: The Elementor plugin configuration.

## Example

There's a sample widget included in this project. To see it in action, run the following commands:

```bash
npx create-prek-el-widgets@latest my-new-project --ts --tailwind
cd my-new-project

# Generate plugin zip
pnpm plugin-zip
```

Then, install the generated my-new-project.zip file as a plugin in your WordPress site. Now open the Elementor editor and search for "my new project" to see the sample widget. Drag it to the canvas and see it in action.

## Contributing

Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.

---
_Source: https://npm.io/package/create-prek-el-widgets · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._