React ElectroniX

react-electronix is a library that provides premium, realistic 3D React components to simulate the appearance of modern devices like iPhones, MacBooks, IMacs, and Galaxy phones.

Installation

You can install react-electronix using npm:

npm install react-electronix

Usage

MacbookPro component

The MacbookPro component simulates the appearance of a modern 14-inch MacBook Pro, including the iconic notch and a 3D perspective fold.

| Prop | Type | Default | Description | | ------------ | ----------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------- | | width | number | 600 | The width of the Macbook in pixels | | open | boolean | true | Whether the Macbook is open or closed | | startup | boolean | false | Whether to show a startup animation | | animateOpen| boolean | false | Whether to animate the opening/closing of the Macbook | | openAngle | number (degrees) | 0 | The angle at which the Macbook opens (0 for fully flat, 90 for fully open) | | perspective| number | 2500 | The CSS perspective value for the 3D effect | | color | MacbookProColor | 'silver' | Available: 'silver', 'space-black' | | old | boolean | false | Set to true to display the "Classic" MacBook Pro design (legacy style) | | children | React.ReactNode | | The content to display on the screen |

import { MacbookPro } from 'react-electronix';

function App() {
  return (
    <MacbookPro open={true} width={800} color="space-black" startup={true}>
      <div style={{ padding: '20px', color: 'white' }}>
        <h1>MacBook Pro 14"</h1>
        <p>Featuring Liquid Retina XDR display with ProMotion.</p>
      </div>
    </MacbookPro>
  );
}

Iphone component

The Iphone component simulates a modern iPhone with high-fidelity titanium finishes.

| Prop | Type | Default | Description | | --------- | ------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | width | number | 400 | The width of the iPhone in pixels | | color | IphoneColor | 'black' | Available: 'black', 'silver', 'sage', 'mist-blue', 'lavender', 'cosmic-orange', 'deep-blue' | | scrollable| boolean | true | Whether the screen content can be scrolled or not. | | children| React.ReactNode| | The content to display on the screen |

import { Iphone } from 'react-electronix';

function App() {
  return (
    <Iphone width={400} color="mist-blue">
      <div style={{ backgroundColor: '#f0f0f0', height: '100%' }}>
        <h1>iPhone Content</h1>
      </div>
    </Iphone>
  );
}

Galaxy component

The Galaxy component simulates a modern Samsung Galaxy device with a punch-hole camera and an expansive color palette.

| Prop | Type | Default | Description | | --------- | ------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | width | number | 400 | The width of the device in pixels | | color | GalaxyColor | 'titanium-gray' | Titanium: 'titanium-silverblue', 'titanium-black', 'titanium-gray', 'titanium-whitesilver', 'titanium-jetblack', 'titanium-jadegreen', 'titanium-pinkgold'. Standard: 'navy', 'icyblue', 'silver-shadow', 'mint', 'blueblack', 'coralred', 'pinkgold'. | | children| React.ReactNode| | The content to display on the screen |

import { Galaxy } from 'react-electronix';

function App() {
  return (
    <Galaxy width={400} color="titanium-silverblue">
      <div style={{ backgroundColor: '#000', color: '#fff', height: '100%' }}>
        <h1>Galaxy Display</h1>
      </div>
    </Galaxy>
  );
}

IMac component

The IMac component simulates a modern 24-inch IMac with its signature front-facing "chin" and slim profile.

| Prop | Type | Default | Description | | --------- | ----------- | ---------- | -------------------------------------------------------------------------------------------------------------------- | | width | number | 600 | The width of the IMac in pixels | | color | IMacColor | 'silver' | Available: 'blue', 'purple', 'pink', 'orange', 'yellow', 'green', 'silver' | | children| React.ReactNode| | The content to display on the screen |

import { IMac } from 'react-electronix';

function App() {
  return (
    <IMac width={600} color="pink">
      <div style={{ background: '#fff', height: '100%' }}>
        <h1>iMac Pro</h1>
      </div>
    </IMac>
  );
}

IPad component

The IPad component simulates a modern iPad Air/Pro with uniform bezels, thin high-fidelity finishes, and a 3D depth effect. It supports both landscape and portrait orientations.

| Prop | Type | Default | Description | | ------------- | ---------------------------- | --------------- | --------------------------------------------------------------------------- | | width | number | - | The width of the device in pixels | | color | IPadColor | 'space-gray' | Available: 'space-gray', 'silver', 'yellow', 'pink', 'blue' | | orientation | 'landscape' \| 'portrait' | 'landscape' | The orientation of the device. | | scrollable | boolean | true | Whether the screen content can be scrolled or not. | | children | React.ReactNode | | The content to display on the screen |

import { IPad } from 'react-electronix';

function App() {
  return (
    <IPad width={600} color="blue" orientation="landscape">
      <div style={{ background: '#000', color: '#fff', height: '100%', padding: '20px' }}>
        <h1>iPad Air</h1>
        <p>Powerful. Colorful. Wonderful.</p>
      </div>
    </IPad>
  );
}

Mac component (Legacy)

The original Mac component for general MacBook simulation.

| Prop | Type | Default | Description | | --------- | --------------- | ------- | -------------------------------------------------------------------------- | | width | number | 600 | The width of the Macbook in pixels | | open | boolean | true | Whether the Macbook is open or closed | | startup | boolean | false | Whether to show a startup animation | | children| React.ReactNode | | The content to display on the screen |

License

This library is licensed under the MIT License.