Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@brandingbrand/fscomponents
Advanced tools
FSComponents is Flagship's React Native component libraries.
A great way to see some of the components and options that FSComponents offers is to visit Flagship's Storybook on our wiki.
It is often helpful to run a development version of storybook on your local system to interactively develop and test changes to the components in a controlled environment with a rapid re-compile time. To run:
cd flagship
yarn
to install all required dependenciesyarn dev:storybook
to compile and run local version that will watch for and update according to
changes. The default port is 9001.Below you will find some guidance and advice on using some of our most-used and most-customizable components.
Flagship's Form component utilizes the t-comb-form-native
library for its excellent validation capablities. As such, each form instance requires types
to be passed in via the Form's fieldsTypes
property. T-comb-form options
are passed in via our Form component's individual fieldsOptions
, fieldsStyleConfig
, style
,
and templates
props, respectively.
Important Note: T-comb-form-native instances are immutable, which means attempts to dynamically
update them can result in unexpected behaviors. Consult the
Disable a field based on another field's value
section in t-comb-form-native's
api guide and t-comb's
updating immutable instances
for more info.
Our basic form component can be configured to display the textbox (other structures in development)
field labels above, inline with, or floating in the textbox, or hidden altogether. The default
position is inline - the other options can be configured through the labelPosition
property which
accepts the enums FormLabelPosition.Above
, FormLabelPosition.Floating
,
FormLabelPosition.Hidden
, and FormLabelPosition.Inline
, respectively.
The labelPosition templates are implemented as templates. Templates in t-comb-form native must be
functional components. Because we need each field to ultimately be a stateful component in order to
display activity and errors, these functional components return our stateful textbox field
component and passes it locals
and labelPosition
as props. The constructor conditionally generates
styles values from the locals stylesheet based on the labelPosition prop.
These labelPosition templates are passed into the templates field in the options object between the
default templates (t-comb form) and the templates
prop templates to ensure that
const _options = {
stylesheet: { ...stylesheet, ...fieldsStyleConfig },
fields: fieldsOptions,
templates: { ...defaultTemplates, ...LabelMap[labelPosition], ...templates }
};
In order to ensure that our customized form label positions were still overwritable by an individual
user's fieldsStyleConfig
or template
choices
Our form component changes color and style when active, inactive, and when the validator has found
an error. The default colors are black (#000000), grey (#cccccc), and red (#d0021b), but they can
be changed through the activeColor
, errorColor
, and inactiveColor
props. On render, the form
component dynamically generates a stylesheet with the correct colors.
FAQs
Reusable, cross-platform frontend components
The npm package @brandingbrand/fscomponents receives a total of 1,011 weekly downloads. As such, @brandingbrand/fscomponents popularity was classified as popular.
We found that @brandingbrand/fscomponents demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 92 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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.