Skip to content

rough-stuff/wired-elements-react

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

wired-elements-react

React wrappers for wired-elements. Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look.

Wired Elements (github) are implemented as web components. Though you can use these Web Components directly in React (like, here), and in any framework; React's design make them a bit non-trivial to use at times. (More here).

This project wraps the web components in React components to make them easy to use. This is done via @lit-labs/react made by Lit.

Usage:

Add to your project:

npm i wired-elements-react

And use then in your JSX:

import { WiredButton, WiredInput, WiredCard } from "wired-elements-react";

function App() {
  let textInput = React.createRef();

  function handleClick() {
    window.alert(`Hello ${textInput.current.value}!`);
  }

  return (
    <WiredCard elevation="5">
      <h1>wired-elements demo</h1>
      <section>
        <WiredInput placeholder="your name" />
        <WiredButton elevation={2} onClick={handleClick}>
          Submit
        </WiredButton>
      </section>
    </WiredCard>
  );
}

Example

Here's a basic example on CodeSandbox: Open sandbox

Documentation

Documentation on individual component can be found here.

License

MIT License (c) Preet Shihn

Support Rough Stuff

Become a financial contributor and help us maintain the Rough libraries like this one. Open Collective or Github Sponsor

About

React wrappers for wired-elements

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published