0.4.2 • Published 3 months ago
@brinkninja/widgets v0.4.2
Installing the widgets
Install the Brinkninja Widget npm package:
npm install @brinkninja/widgets
or
yarn install @brinkninja/widgets
or
pnpm add @brinkninja/widgets
Adding widget to React application
After installing the npm package as outlined in , add the widget into your React app:
import { RecurringSwapWidget } from '@brinkninja/widgets'
// ...
<RecurringSwapWidget
apiKey="apiKey"
apiKeyName="apiKeyName"
appName="apiKeyName"
// other config options
/>
Widget customization
To customize the widget's theme interactively, visit the Brink Widget Studio. Copy paste the config code snippet into your code via Copy React Snippet button
or
check our widgets docs @TODO.
Customization example
import { RecurringSwapWidget } from '@brinkninja/widgets'
<RecurringSwapWidget
apiKey="apiKey"
axiosBaseUrl="axiosBaseUrl"
apiKeyName="apiKeyName"
appName="appName"
theme={{
mode: 'light',
shape: {
roundedBtn: '100px',
roundedBox: '0px',
roundedFormField: '12px'
},
config: {
syncFieldColorWithText: true
},
slot: {
tabsInContainer: true
},
component: {
message: {
outline: '2px solid #000000',
backgroundColor: 'white'
}
},
colors: {
primary: {
'100': '#fff5fc',
'200': '#e4b2d0',
'300': '#d993bd',
'400': '#c864a0',
main: '#c864a0',
'500': '#bd448d',
'600': '#843063',
'700': '#732956'
},
secondary: {
'100': '#FAF0FF',
'200': '#A251D7',
'300': '#8C2CC6',
'400': '#6A00A3',
main: '#BE33FF',
'500': '#590073',
'600': '#3E0050',
'700': '#360046'
},
neutral: {
'100': '#ffffff',
'200': '#f6f6f6',
'300': '#ededed',
'400': '#a5a5a5',
main: '#a5a5a5',
'500': '#7e7e7e',
'600': '#535353',
'700': '#222222'
},
informative: {
'100': '#e6eff9',
'200': '#96bfe5',
'300': '#6ba4da',
'400': '#2b7dca',
main: '#2b7dca',
'500': '#0062bf',
'600': '#004586',
'700': '#003c75'
},
error: {
'100': '#f5d6d6',
'200': '#ebbaba',
'300': '#e29e9e',
'400': '#d67474',
main: '#d67474',
'500': '#ce5757',
'600': '#903d3d',
'700': '#7d3535'
},
success: {
'100': '#ecf9f2',
'200': '#b2e4c9',
'300': '#93d9b2',
'400': '#64c991',
main: '#64c991',
'500': '#44bd7c',
'600': '#308556',
'700': '#29744b'
},
warning: {
'100': '#fcf3e6',
'200': '#f3cd96',
'300': '#eeb96b',
'400': '#e69b2b',
main: '#e69b2b',
'500': '#e08600',
'600': '#9e5e00',
'700': '#895200'
},
text: {
primary: '#000000',
secondary: '#7F7F7F',
disabled: '#A5A5A5'
}
}
}}
/>