Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
react-bluekit
Advanced tools
$ npm install --save react-component-library
import createBlueKit from 'react-component-library/lib/createGenerator'
createBlueKit({
// base file of start - this is location where componentsIndex.js will be generated to
baseDir: `${__dirname}/src/browser/componentLibrary`,
// relative paths from base dir where to look for components
paths: ['../components/', '../auth'],
// if you want to use gulp tasks pass gulp
gulp: gulp,
// specify name for build command -> gulp build-component-library
buildCommand: 'build-component-library',
// specify name for watch command -> gulp watch-component-library
watchCommand: 'watch-component-library',
})
you can setup components index on application start and then watch components for changes by editing default task to:
// from gulp.task('default', ['server']); to:
gulp.task('default', ['build-component-library', 'server', 'watch-component-library']);
if you don't want componentIndex to be in your git
then add componentsIndex.js
to .gitignore
and add build command to build task
gulp.task('build', ['build-component-library', 'build-webpack']);
// make sure that component build is before webpack
it will be build when needed
look at example directory and you need to add only:
// createRoutes.js
import libraryRouter from './componentLibrary/libraryRouter'; // eslint-disable-line import/default
export default function createRoutes(getState) {
return (
<Route component={App} path="/"> // example
{libraryRouter()} // actual code to insert
</Route>
)
}
If you have component which requires to get some function which will change some props of same component, then you can use:
import React, {Component} from 'react'
export default class WithExtendedProps extends Component {
static extendComponentLibraryProps = (props, library) => ({
...props,
onEditingModeChange: value => library.setValue('editing', value)
});
render() {
return (null)
}
}
What it exactly does:
you can use library.setValue(propName, newValue)
which take two arguments:
npm install
cd ./example_app
npm install
gulp
this will start development server and then you can play with Library components
MIT © Ondrej Bartas
FAQs
Visualisation and Playground generated from Components
The npm package react-bluekit receives a total of 17 weekly downloads. As such, react-bluekit popularity was classified as not popular.
We found that react-bluekit demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 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.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.