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

@wordpress/components

Package Overview
Dependencies
Maintainers
25
Versions
305
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@wordpress/components

UI components for WordPress.

  • 25.8.12
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
167K
increased by3.31%
Maintainers
25
Weekly downloads
 
Created

What is @wordpress/components?

@wordpress/components is a library of reusable UI components for building WordPress plugins and themes. It provides a wide range of components that adhere to the WordPress design language, making it easier to create consistent and accessible user interfaces.

What are @wordpress/components's main functionalities?

Button

The Button component is used to create various types of buttons, such as primary, secondary, and tertiary buttons. It supports different states and styles.

import { Button } from '@wordpress/components';

const MyButton = () => (
  <Button isPrimary onClick={() => alert('Button clicked!')}>Click Me</Button>
);

Panel

The Panel component is used to create collapsible panels, which can contain various types of content. It is useful for organizing settings and options in a structured way.

import { Panel, PanelBody, PanelRow } from '@wordpress/components';

const MyPanel = () => (
  <Panel>
    <PanelBody title="My Panel" initialOpen={true}>
      <PanelRow>
        <p>Panel content goes here.</p>
      </PanelRow>
    </PanelBody>
  </Panel>
);

TextControl

The TextControl component is used to create text input fields. It supports labels, placeholders, and change handlers, making it easy to capture user input.

import { TextControl } from '@wordpress/components';

const MyTextControl = () => (
  <TextControl
    label="Name"
    value={name}
    onChange={(value) => setName(value)}
  />
);

CheckboxControl

The CheckboxControl component is used to create checkbox input fields. It supports labels and change handlers, making it easy to capture boolean input.

import { CheckboxControl } from '@wordpress/components';

const MyCheckboxControl = () => (
  <CheckboxControl
    label="Accept Terms"
    checked={isChecked}
    onChange={(isChecked) => setIsChecked(isChecked)}
  />
);

ColorPicker

The ColorPicker component is used to create a color picker input. It allows users to select colors and provides the selected color value.

import { ColorPicker } from '@wordpress/components';

const MyColorPicker = () => (
  <ColorPicker
    color={color}
    onChangeComplete={(value) => setColor(value.hex)}
  />
);

Other packages similar to @wordpress/components

Keywords

FAQs

Package last updated on 05 Nov 2023

Did you know?

Socket

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.

Install

Related posts

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