Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@gusmano/reext
Advanced tools
React ReExt provides React components for the Sencha ExtJS Framework.
View the running example at http://marcgusmano.com/ReExt/
Note: Quick Start assumes npm is installed. To install npm, install Node.js
The commands can be run all at one time.
Copy and paste the commands below into a MacOS terminal window.
npm create vite@latest reextvite -- --template react-swc
cd reextvite
npm install @gusmano/reext
cp -r node_modules/@gusmano/reext/dist/ext public
cp node_modules/@gusmano/reext/dist/example/App.jsx src/App.jsx
npx vite --open
npx create-react-app reextcra
cd reextcra
npm install @gusmano/reext
cp -r node_modules/@gusmano/reext/dist/ext public
cp node_modules/@gusmano/reext/dist/example/App.jsx src/App.js
npm start
Copy and paste the commands below into a Windows Command Prompt window.
npm create vite@latest reextvite -- --template react-swc
cd reextvite
npm install @gusmano/reext
xcopy node_modules\@gusmano\reext\dist\ext public\ext /E/H/C/I
xcopy node_modules\@gusmano\reext\dist\example\App.jsx src\App.jsx /Y
npx vite --open
npx create-react-app reextcra
cd reextcra
npm install @gusmano/reext
xcopy node_modules\@gusmano\reext\dist\ext public\ext /E/H/C/I
xcopy node_modules\@gusmano\reext\dist\example\App.jsx src\App.js /Y
npm start
https://create-react-app.dev/docs/getting-started/
npx create-react-app reextcra
npm create vite@latest reextvite -- --template react-swc
Use the package manager npm to install React ReExt.
npm install @gusmano/reext
React ReExt is dependent on a version of the Sencha ExtJS framework (modern toolkit), and must have the framework installed in the public/ext folder of your React project.
The npm package includes the Sencha ExtJS varsion 7.0.0 GPL and can be used by copying the node_modules/@gusmano/reext/dist/ext folder to the project's public/ext folder.
Run this command from the root of your generated project.
MacOS
cp -r node_modules/@gusmano/reext/dist/ext public
Windows
xcopy node_modules\@gusmano\reext\dist\ext public\ext /E/H/C/I
React ReExt can be configured to use any commercially available version of the Sencha Ext JS framework (7x and above).
For more information, contact Marc Gusmano at marcgusmano@gmail.com.
React ReExt has been tested with the latest version of the Sencha Ext JS framework, which at the time of this publishing is Sencha ExtJS version 7.7.0.
To purchase a commercial version of Sencha ExtJS, to to https://store.sencha.com/.
React ReExt has been tested with the latest version of React, which at the time of this publishing is React 18.2.0.
import React, { useState, useRef } from 'react';
import ReExt from '@gusmano/reext';
const App=()=>{
const [labelcmp, setLabelCmp] = useState(null);
const labelcmpRef = useRef();
labelcmpRef.current = labelcmp;
const [labeltext, setLabelText] = useState('initial text');
const [row, setRow] = useState(null);
return (
<div style={{
boxSizing:'border-box',height:'100%',
display:'flex',flexDirection:'column'
}}>
<ReExt xtype='logo'/>
<div style={{display:'flex'}}>
<ReExt xtype='button'
config={{text:'click me',width:100,ariaLabel:'demobutton'}}
onTap={()=>{
labelcmpRef.current.setHtml('set using method call');
setLabelText('set using state');
}}
/>
</div>
<ReExt xtype='grid'
style={{height:300}}
config={{
title: 'grid',
columns: [
{text:'Name',dataIndex:'name',width:200},
{text:'Email',dataIndex:'email',flex:1},
{text:'Phone',dataIndex:'phone',width:200}
],
data: [
{name:'Lisa',email:'lisa@simpsons.com',phone:'555-111-1224'},
{name:'Bart',email:'bart@simpsons.com',phone:'555-222-1234'},
{name:'Homer',email:'homer@simpsons.com',phone:'555-333-1244'},
{name:'Marge',email:'marge@simpsons.com',phone:'555-444-1254'}
]
}}
onSelect={(grid, selected)=>{
var row = selected[0].data
setRow(row)
var rowString = JSON.stringify(row)
labelcmpRef.current.setHtml(rowString)
setLabelText(rowString)
}}
/>
<div style={{flex:1,padding:20,border:'1px solid gray'}}>
{row !== null &&
<>
<ReExt xtype='label' config={{html: `name: ${row.name}`}}/>
<ReExt xtype='label' config={{html: `email: ${row.email}`}}/>
<ReExt xtype='label' config={{html: `phone: ${row.phone}`}}/>
</>
}
</div>
<div style={{flex:1,padding:20,border:'1px solid gray'}}>
<ReExt xtype='label'
config={{html:'initial text'}}
ready={(cmp)=>{
setLabelCmp(cmp)
}}
/>
<ReExt xtype='label'
config={{html:labeltext}}
/>
</div>
</div>
)
}
export default App
npm start
npx vite --open
The ReExt React component has 5 static props (only xtype is required) and any number of optional event props
FAQs
React ReExt
We found that @gusmano/reext demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.